react-standalone-form

Create React forms with a very minimalistic code, without having to write state management logic on your own. Let everything happening under the hood. A themeable form library based on Context API with a wide selection of user friendly inputs.

Install

yarn add react-standalone-form

Demo

Example usage

Quick start:

1. Wrap your entitre app into <FormThemeProvider>.
2. Put <Form> component anywhere in the app, define each field by adding its name to a fields prop array.
3. Use any from built-in visual input components to compose a form. Give each input a name prop to tell which field from a fields array should be controlled by it. Add other props in order to customize the inputs.
4. Use <FormButton> to trigger a submit function which gives access to all field values formatted in a form of a simple javascript object.

// App.js
import React from 'react'
import ReactDOM from 'react-dom'
import Form, {
  FormThemeProvider,
  Input,
  Select,
  FormButton,
} from 'react-standalone-form'


const BasicFormExample = () =>
  <Form fields={['name', 'email', 'type']}>
    <Input
      name='name'
      label='User name'
    />
    <Input
      name='email'
      type='email'
      label='E-mail'
    />
    <Select
      name='type'
      label='Type of a user'
      options={['Viewer', 'Moderator', 'Admin']}
    />
    <FormButton
      callback={fields => console.log(fields)}
    >Save</FormButton>
  </Form>


const App extends React.Component {
  render() {
    return (
      <FormThemeProvider>
        <div className='my-app'>
          <BasicFormExample />
        </div>
      </FormThemeProvider>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#app'))

Features

• Built in form state management
• Wide range of UI form components
• Built in form validation system
• Customizable theme and text labels
• Required or optional fields
• Loading state support for asynchronous operations
• Submit action triggered by a submit button or by each change with debounce
• Ability to reset all fields after successful submit (show docs)
• Data collected from forms is well formatted for API calls
• Multiple forms support (being able to put a form into a form as a field group)
• Cross browser tested
• Easy way to create custom own inputs

Docs

• Components API
• Form layouts
• Theming
• Advanced usage