reui

0.5.0 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i reui

Weekly Downloads

1

Version

0.5.0

License

MIT

Last publish

Collaborators

  • voidxnull