Zaku

Contains sets of React components that will be used to render the objects with a pre-defined fields.

Installation

$ yarn install zaku

Usage

  import React, { Component } from 'react';
  import { Input, Select } from "zaku";
  class App extends Component {
    render() {
      const input = {
        "key": "callbackNumber",
        "type": "number",
        "label": "Callback number",
        "minLength": 3,
        "maxLength": 20,
        "min": 0,
        "max": 10,
        "required": true,
        "placeholder": "Callback number"
      };
      const select = {
        "key": "howAreYouAffected",
        "type": "select",
        "label": "How are you affected by the typoon?",
        "options": {
          "data": [
            {
              "label": "No power at home",
              "value": "No power at home",
              "key": "howAreYouAffectedNoPowerAtHome"
            },
            {
              "label": "I am hurt and in need of medical attention",
              "value": "I am hurt and in need of medical attention",
              "key": "howAreYouAffectedIAmHurtAndInNeedOfMedicalAttention"
            },
            {
              "label": "No water or food",
              "value": "No water or food",
              "key": "howAreYouAffectedNoWaterOrFood"
            },
            {
              "label": "Call me / Other",
              "value": "Call me / Other",
              "other": true,
              "key": "howAreYouAffectedCallMeOther"
            }
          ],
        },
        "multiple": true,
        "required": false,
        "placeholder": ""
      };
      const inputClasses = {
        name: true,
        "name-styling": true
      };
      const selectClasses = {
        "cool-dropdown": true,
        "some-otherstyling": true
      };
      return (
        <div className="App">
          <Input fields={input} cssClasses={inputClasses}/>
          <Select fields={select} cssClasses={selectClasses}/>
          <Input fields={input} />

          {/** Custom Render **/}
          <Input
            fields={input}
            onChange={this.handleInputChange}
            render={(NodeElement, label) => {
              return (
                <div className="form-group">
                  <label for="input-text" className="col-sm-2 control-label">
                    {label}
                  </label>
                  <div className="col-sm-10">
                    <NodeElement />
                  </div>
                </div>
              );
            }}
          />
        </div>
      );
    }
  }
  export default App;

Components

Version 0.3.0 supports only Input, Select and Radio components

Development

  $ git clone <repository>
  $ cd <repository>
  $ yarn install
  $ yarn run build
  $ yarn link

  // In your react app
  $ yarn link zaku