@1studio/ui

A collection of useful database handling React Redux UI.


Keywords
ui, react, redux, components, grid, table, form, chart
License
BSD-3-Clause
Install
npm install @1studio/ui@3.7.0

Documentation

ui · travis build codecov coverage version commit type BrowserStack Status

A collection of useful React/Redux UI elements. Examples

Installation

Using npm:

$ npm i -S @1studio/ui

Manual

Form:

Automatically store the form state change on Redux Store (form.example). No need to Redux or Actions. Only concerned field updating.

import React from 'react';

/* !- React Elements */

import Form,
{
  Toggle,
  Checkbox,
}
from '@1studio/ui/form';


const ExampleForm = () =>
(
  <Form
    id="example"
  >
    <Toggle
      id="status"
    />
    <Checkbox
      id="checkbox"
      data={[{ id: 1, title: 'elso' }, { id: 2, title: 'masodik' }]}
    />
  </Form>
);

// => Redux.store = {
  form: {
    'example':
    {
      status: 1,
      checkbox: [1, 2],
    }
  }
}

More info

Fields: Checkbox, Date, Dropdown, Input, Multiple, Toggle.

Form Actions:

Every change store on Redux Store (form). Form wrapper does this.

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import * as Actions from '@1studio/ui/form/actions';


/* !- React Elements */

import
{
  Toggle,
}
from '@1studio/ui/form';


/* !- Stateless Component */

const ExampleForm = (
{
  setValues,
},
) =>
(
  <Toggle
    id="status"
    label="Status"
    onChange={setValues}
  />
);

/**
 * propTypes
 * @type {Object}
 */
ExampleForm.propTypes =
{
  setValues: PropTypes.func.isRequired,
};

export default connect(
  null,
  Actions,
)(ExampleForm);

More about Actions.

Testing

Cross-browser testing provided by:

BrowserStack

License

@1studio/ui is BSD licensed.