@1studio/ui

3.7.0 • Public • Published

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.

Package Sidebar

Install

npm i @1studio/ui

Weekly Downloads

1,663

Version

3.7.0

License

BSD-3-Clause

Unpacked Size

15.5 MB

Total Files

697

Last publish

Collaborators

  • roberto404