react-heroes

React toolkit.

Installation

npm install react-heroes --save
# or
yarn add react-heroes

Components

Form

Simply create a FormStore and pass into Form component. value and onChange of form controls (such as input) are unnecessary.

• Basic usage:

import { Form, FormStore } from 'react-heroes'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.store = new FormStore()
  }

  onSubmit = (e) => {
    e.preventDefault()

    const values = this.store.get()
    console.log(values)
  }

  render() {
    return (
      <Form store={this.store}>
        <Form.Field label='Name' name='name'>
          <input type='text' />
        </Form.Field>
        <Form.Field label=''>
          <button onClick={this.onSubmit}>Submit</button>
        </Form.Field>
      </Form>
    )
  }
}

• Default values:

const store = new FormStore({ name: 'Harry' })
// ...
store.reset()

• Form validator:

const rules = {
  name: (!!val && !!val.trim()) || 'Name is required'
}

const store = new FormStore({}, rules)
// ...
const [error, values] = store.validate()

• APIs:
  • new FormStore(defaultValues?, rules?) Creates form store.
  • store.get() Returns entire form values.
  • store.get(name) Returns field value by name.
  • store.set() Sets entire form values.
  • store.set(name, value) Sets field value by name.
  • store.set(name, value, false) Sets field value by name without validating.
  • store.reset() Resets form with default values.
  • store.validate() Validates entire form and returns error message and values.
  • store.validate(name) Validates field value by name and returns error message.
  • store.error() Returns the first error message.
  • store.error(name) Returns error message by name.
  • store.error(name, message) Sets error message by name.
  • store.subscribe(listener) Adds listener and returns unsubscribe callback.

RouterView

Route configuration component for react-router.

• Basic usage:

const routes = [
  {
    path: '/home',
    component: () => <h2>Home</h2>
  },
  {
    path: '/product',
    component: () => <h2>Product</h2>
  },
  {
    path: '/about',
    component: () => <h2>About</h2>
  }
]

function App() {
  return (
    <Router history={history}>
      <div>
        <h1>App</h1>
        <RouterView routes={routes} />
      </div>
    </Router>
  )
}