react-uikit-simple v0.11.4

React Uikit Simple

React Uikit Simple Compoment can use native attributes

Install CSS

import 'react-uikit-simple/dist/react-uikit-simple.css';

Compoment

Button

import { Button } from 'react-uikit-simple';

// default
<Button>Submit</Button>

// danger
<Button className="danger">Submit</Button>

// not allowed
<Button className="not-allowed">Submit</Button>

custom style

.ui-button.custom {
  background: #ddd;
  color: #000;

  &:not(.disabled):hover {
    background: color(#ccc blackness(25%));
  }

  &.push:hover {
    background: color(#ccc blackness(40%));
  }

  &.disabled {
  }
}

Textfield

import { TextField } from 'react-uikit-simple';

// Special className 'clear': clear default style
// disabled: Boolean
// onChange: value => void
// onChanged: value => void (Execution is delays invoking func until after wait 300 milliseconds)
// validate: value => boolean

<TextField disabled={true}
           value={this.state.value}
           onChange={val => this.setState({value: val})}
           validate={val => val.match(/^[0-9]*$/)}/>

Modules

SearchBox

import { SearchBox } from 'react-uikit-simple';

<SearchBox onChanged={val => console.log(val)}/>

Icon

MenuIcon

<MenuIcon color="#0f0" status={value => console.log(value)}/>

HOC

Responsive

LocationFinder

FadeIn

FixTop