InPlayer React UI Components

Modern React UI library. Code less, do more.

yarn add @inplayer-org/inplayer-ui styled-components

InPlayer UI is a style system / UI library for React. It works with Styled Components 💅.

Up & Running

To install dependencies with Yarn, run:

$ yarn install

or to install with npm, run:

$ npm install

Usage

Here is a quick example to get you started, it's all you need:

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { ThemeProvider } from "styled-components";
import { ThemeWrapper, Button } from "@inplayer-org/inplayer-ui";

function App() {
  return (
    <ThemeWrapper withProvider={ThemeProvider}>
      <Button size="lg">
        Hello World
      </Button>
    <ThemeWrapper/>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Yes, it's really all you need to get started as you can see in this live and interactive demo:

Modifiers

This library utilizes styled-components-modifiers to build modifiers. Modifiers are small functions that allow us to alter the properties of an Element. They primarily live in the Element's file and are solely responsible for modifying styles. Some modifiers are common to multiple Elements. An example would be fontWeights. These common modifiers live in src/modifiers

Local Development

Module Development Workflow

Helpful information on development workflow in this library lives here.

Linting

_NOTE: The linter will run against everything in the src directory.

JavaScript Linting

To run the linter once:

$ yarn lint:js

To run the watch task:

$ yarn lint:js:watch

Style Linting

To run the style linter:

$ yarn lint:style

Linting JavaScript & Styles

To run both linters:

$ yarn lint

Review

If you'd like to run the linters and tests at once (this is a nice check before pushing to Github or deploys), you can run:

$ yarn review

Build

_NOTE: When you run build, Babel will create a build directory.

Run once:

$ npm/yarn run build

Run the watch script:

$ npm/yarn run build:watch

NOTE: the build script runs in the prepublishOnly script just before you publish to npm.

Contributing

We are thankful for any contributions made by the community. By contributing you agree to abide by the Code of Conduct in the Contributing Guidelines.