Create React forms with a very minimalistic code Sample in 2020

Create React forms with a very minimalistic code Sample in 2020

tutorials -


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.


yarn add react-standalone-form

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, {
} from 'react-standalone-form'

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

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

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


  • 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
  • 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


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff