react-ui-form

The UI Component that providing basic form controls which is compatible with React.js

Get Started

import {
  UIForm,
  UIRow,
  UITextInput,
  UIButton,
} from 'react-ui-form';
 
class ExampleForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: null,
      password: null,
    };
  }
  onLogin() {
    // this.state.username
    // this.state.password
  }
  render() {
    return (
      <UIForm>
        <Row name="username">
          <UITextInput bindStateCtx={this} bindStateName="username" />
        </Row>
        <Row name="username">
          <UITextInput bindStateCtx={this} bindStateName="username" password={true} />
        </Row>
        <Row name="username">
          <UIButton text="login" onClick={this.onLogin.bind(this)} />
        </Row>
      </UIForm>
    )
  }
}
 

Components

• Basis
  • UIForm
  • UIRow
  • UIText
• Buttons
  • UIButton
• Inputs
  • UITextInput
  • UIDateInput
  • UITimeInput
• Pickers
  • UIOptionPicker
  • UIColorPicker

Installation

$ npm install react-ui-form

Tests

$ npm install
$ npm test

Example

$ cd examples
$ npm install && npm start
$ open ./index.html

License

MIT @ WeFlex