reactor-ui

    0.1.1 • Public • Published

    Reactor UI

    Build Status

    ** This is work in progress **

    Reactor UI is a reusable UI kit written in React.

    Note that this is very much on its initial development phase, a work in progress.

    Table of Contents

    1. Motivation
    2. Usage
    3. Buttons
    4. SideNav

    Motivation

    The aim for this project is to be used as a base for developers creating custom ui kits in their projects.

    Usage

    npm install --save reactor-ui

    To load the css, you need to have css loader within your build. If you are using webpack then you can use css-loader

    npm install --save-dev css-loader

    Then add this on your webpack config under the loaders section...

        ...
        loaders [
            ...
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]

    Components

    Buttons

        
        import { Btn } from 'reactor-ui/buttons';
     
        //load the css before loading, or can be done from your projects
        //entry point
        import 'reactor-ui/css/buttons.css';
     
        const Buttons = ({onClick}) => (
            <span>
                <Btn onClick={onClick} text=' Reactor UI '/>
                <Btn scheme='primary' onClick={onClick} text=' Reactor UI '/>
                <Btn scheme='success' onClick={onClick} text=' Reactor UI '/>
                <Btn scheme='warning' onClick={onClick} text=' Reactor UI '/>
                <Btn scheme='danger' onClick={onClick} text=' Reactor UI '/>
                <Btn disabled={true} text=' Reactor UI '/>
            </span>
        );

    Override Styling

    To change the styles, just override the css and load your overrides

     
        //load the css before loading
        import 'reactor-ui/css/buttons.css';
        import 'myproject/css/project.css';
     
     
    /** project.css, override primary color **/
     
    .rui-btn-primary {
      background: blue;
      color: #FFFFFF;
    }
     

    SideNav

    SideNav is a vertical navigation. Do note that its a stateless component so you would need to provide it all selection details and such from within a stateful component

        import React from 'react';
     
        import { SideNav, NavItem, NavGroup } from 'reactor-ui/sidenav';
     
        //import styles here or can be from projects entry point
        import 'reactor-ui/css/sidenav.css';
     
        const SideMenu extends React.Component {
     
            constructor() {
                this.state = { };
            }
     
            onNavClick = (id) => {
                this.setState( { selectedId: id });
            }
            render() {
                return (
                    <div style={{ marginRight: 4, width: 240 }}>
                        <SideNav onClick={ this.onNavClick } selectedId={this.selectedId}>
                            <NavItem id={'1'} text='Dashboard' icon='fa fa-dashboard'/>,
                            <NavItem id={'2'} text='Channels' icon='fa fa-exchange'/>,
                            <NavGroup id={'3'} text='Products' icon='fa fa-cube'>
                                <NavItem id={'3.1'} text='Inventory Levels' icon='fa fa-bar-chart'/>
                                <NavItem id={'3.2'} text='Sales Report' icon='fa fa-dollar'/>
                            </NavGroup>                        
                            <NavItem id={'4'} text='Inventory' icon='fa fa-cubes'/>
                        </SideNav>  
                    </div>
                );                 
            }    

    Styling

    To change the styles, just override the css and load your overrides

     
        //load the css before loading
        import 'reactor-ui/css/sidenav.css';
        import 'myproject/css/project.css';
     
     
    /** project.css, override sidenav style **/
     
    .rui-snav-cdark {
      background: #2c3e50;
      color: #F5F7FA;
    }
     
    .rui-snav-item-green:hover {
      background: #16a085;
    }
     

    Development

    Running examples and development

    You need to run

    npm run dev

    but you need to pass extra arguments specifying the entry point for webpack. To run the sidenav.js example

    npm run dev -- examples/sidenav.js

    do the same for other examples.

    Testing

    npm run test

    Contributing

    Install

    npm i reactor-ui

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • wmira