Skip to content
InPlayer React UI Components
Branch: dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Update CHANGELOG for v1.0.3 Oct 18, 2019
styleguide/ThemeWrapper Fix flow warnings Nov 20, 2018
.babelrc Set modoules false for tree-shaking purposes Sep 30, 2019
.editorconfig Use ES6 exports and add editorconfig Oct 9, 2018
.eslintignore feat: Enable loading of icon font. Mar 21, 2019
.eslintrc Update all npm libs Oct 10, 2019
.gitignore Add .vscode to gitignore. Jul 29, 2019
.travis.yml Create Mar 29, 2019
jsconfig.json feat: Enable loading of icon font. Mar 21, 2019
yarn.lock Update npm libs Oct 18, 2019

InPlayer React UI Components

Modern React UI library. Code less, do more.

Build Status Version MIT License

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


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

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:

Edit Button

File Structure

This component library borrows its structure from BEM and is set up to use Blocks, Elements, and Modifiers. Below is a description of each.


Blocks are the highest level of abstraction in the Blocks, Elements, Modifiers concept. They are responsible for providing the context for Elements, handling UI logic, and rendering the Elements within the Block. They are not connected to application state, nor do they handle any business logic.


Elements are the smallest, indivisible parts of UI. They are responsible for actually rendering the UI. They do not handle application logic or UI logic, but they do handle their own modifiers which modify the element’s style. Elements generally exist within the context of a Block (as their own file in the Block’s directory) allowing the reuse of that set of Elements, but they are not exclusively bound to blocks. An example of a stand-alone Element would be an A, Link, H3, or P. These common elements live in src/elements.


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

An Example Structure

├ src/
├── blocks/
|   ├── Grid
|   |   ├── Cell.js     // <- Element
|   |   ├── Container.js   // <- Element
|   |   └── index.js    // <- Block
|   └── index.js        // <- export for all Blocks
├── elements/
|   ├── Label
|   |   ├── tests
|   |   |   ├── __snapshots__
|   |   |   |   └── index.js.snap   // <- Snapshot Test
|   |   |   └── index.js            // <- Test
|   |   └── index.js                // <- Element
|   ├── Loader
|   |   └── index.js                // <- Element
|   ├── Typography
|   |   └── index.js                // <- Element
|   ├── Icon
|   |   └── index.js                // <- Element
|   └── etc.
|   └── index.js                    // <- export for all Blocks
├── modifiers/
|   ├── fontWeights
|   └── etc.
└── index.js                        // <- main export for the library

Local Development

Module Development Workflow

Helpful information on development workflow in this library lives here.


_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


An initial test suite has been setup with two tests (one passing and one intentionally failing). We're using Jest Snapshots for our initial test setup, though Enzyme and Expect are also available. The basic test setup lives in ./tests. The main configuration for Jest lives at the bottom of package.json. Jest also gives us a test coverage tool for free. The setup is at the bottom of package.json. Everything is set to 90% coverage, but your welcome to update that to whatever you'd like.

To run the tests once:

$ yarn test

To run the watch script (for only relevant test files)

$ yarn test:watch

To run the watch script (for all test files)

$ yarn test:watchAll

To view the coverage report:

$ yarn test:coverage:report


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


This library uses Prettier for code consistency. There's a pre-commit hook that will prettier and roll those changes into your commit.


This lib uses react-styleguidist for documenting components. To to view the docs locally, run yarn styleguide and visit http://localhost:6060. To build a static version, run yarn styleguide:build. This static version will be created in /docs.

_NOTE: There is a pre-push script in this library that will automatically update the docs when you push to GitHub.


_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.


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.


Licensed under the MIT License, Copyright © 2018-present InPlayer.

See LICENSE for more information.

You can’t perform that action at this time.