Reui

A collection of themeable React components.

WARNING

The library is in early stage of development

Getting started

Install via NPM

npm install --save reui

Usage

import React from 'react';
import ReactDOM from 'react-dom';
// Import the compiled version
import Reui from 'reui';
// or es6 version
import Reui from 'reui/es6';

// Requires Webpack
import defaultTheme from 'reui/theme';

Reui.setGlobalTheme(defaultTheme);

ReactDOM.render(
  <Reui.Panel>
    <Reui.Button title="Hello World" />
  </Reui.Panel>,
  document.body
);

Creating and applying themes

Reui uses react-themeable under the hood so you can use jss, Radium, React Style, css-modules or plain classes to describe your theme.

Create

Theme is just an object that associates components with its themes

{
  ComponentClass: {
    componentElement: {theme}
  }
}

Exapmle:

var theme = {
  Button: {
    button: 'button',
    buttonDisabled: 'disabled',
    buttonActive: 'active'
  },
  ...
}

Then <Button disabled /> will be rendered as

<button class="button disabled" disabled></button>

Apply

You can apply a theme globally:

Reui.setGlobalTheme(theme)

or directly to a component:

<Button theme={theme.Button} />

A theme passed as the theme prop will be merged with the global theme.