Simple React Form

Simple React Form is the simplest way to handle forms in React. It helps you make reusable form components in React and React Native.

This is just a framework, you must create the form components or install a package with fields that you will use.

To use with React Native, see the dedicated section

Features

• Minimal API with Form and Field.
• Works with React and React Native.
• Full TypeScript definitions.
• Controlled or uncontrolled forms.
• Create your own field components.

See API.md for the complete API reference.

Installation

Install the base package

1npm install simple-react-form
2# or
3yarn add simple-react-form

Example

1import React, { useState } from 'react'
2import { Form, Field } from 'simple-react-form'
3import DatePicker from './myFields/DatePicker'
4import Text from './myFields/Text'
5
6function PostsCreate() {
7  const [state, setState] = useState({})
8
9  return (
10    <div>
11      <Form state={state} onChange={setState}>
12        <Field fieldName="name" label="Name" type={Text} />
13        <Field fieldName="date" label="A Date" type={DatePicker} />
14      </Form>
15      <p>My name is {state.name}</p>
16    </div>
17  )
18}

Contributions

• simple-react-form-material-ui Material UI set of fields.
• simple-react-form-bootstrap Bootstrap set of fields.

Docs

Using with state

In this example, the current value of the form will be stored in a state variable using useState.

1import React, { useState } from 'react'
2import { Form, Field } from 'simple-react-form'
3import DatePicker from './myFields/DatePicker'
4import Text from './myFields/Text'
5
6function PostsCreate() {
7  const [state, setState] = useState({})
8
9  return (
10    <div>
11      <Form state={state} onChange={setState}>
12        <Field fieldName="name" label="Name" type={Text} />
13        <Field fieldName="date" label="A Date" type={DatePicker} />
14      </Form>
15      <p>My name is {state.name}</p>
16    </div>
17  )
18}

Using without state

In this example, the current value of the form will be stored inside the Form component and passed in the onSubmit function. The difference on this is that the state prop does not change over time.

1import React, { useRef } from 'react'
2import { Form, Field } from 'simple-react-form'
3import DatePicker from './myFields/DatePicker'
4import Text from './myFields/Text'
5
6function PostsCreate({ initialDoc }) {
7  const formRef = useRef()
8
9  const onSubmit = ({ name, date }) => {
10    // handle submit
11  }
12
13  return (
14    <div>
15      <Form ref={formRef} state={initialDoc} onSubmit={onSubmit}>
16        <Field fieldName="name" label="Name" type={Text} />
17        <Field fieldName="date" label="A Date" type={DatePicker} />
18      </Form>
19      <button onClick={() => formRef.current.submit()}>Submit</button>
20    </div>
21  )
22}

Field Types

React Simple Form is built from the idea that you can create custom components easily.

Basically, a field type is a component that receives a value prop and an onChange handler. It must render the value and call onChange with the new value whenever it changes.

1import UploadImage from '../components/my-fields/upload'
2
3<Field fieldName='picture' type={UploadImage} squareOnly={true}/>

Creating the field type

You must create a React component.

1import React from 'react'
2
3function UploadImage({ value, onChange, label, errorMessage }) {
4  return (
5    <div>
6      <p>{label}</p>
7      <div>
8        <img src={value} alt="preview" />
9      </div>
10      <TextField
11        value={value}
12        hintText="Image Url"
13        onChange={event => onChange(event.target.value)}
14      />
15      <p>{errorMessage}</p>
16    </div>
17  )
18}
19
20export default UploadImage

You can view the full list of props here.

React Native

In React Native the API is the same, but wrap the form contents in a View component.

Example:

1import React from 'react'
2import { View, TextInput } from 'react-native'
3
4function TextFieldComponent({ value, onChange }) {
5  return (
6    <View>
7      <TextInput
8        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
9        onChangeText={onChange}
10        value={value}
11      />
12    </View>
13  )
14}
15
16export default TextFieldComponent

Render the form inside the desired component

1import React, { useState } from 'react'
2import Text from '../components/my-fields/text'
3import { Form, Field } from 'simple-react-form'
4import { View } from 'react-native'
5
6function MyForm() {
7  const [state, setState] = useState({})
8
9  return (
10    <Form state={state} onChange={setState}>
11      <View>
12        <Field fieldName='email' type={Text}/>
13        <Field fieldName='password' type={Text}/>
14      </View>
15    </Form>
16  )
17}

You should always render your fields inside a View when using react native.

WithValue higher-order component

If you need to access the current form value in child components, use the WithValue component.

1import React from 'react'
2import { Form, Field, WithValue } from 'simple-react-form'
3import Text from './myFields/Text'
4
5function Example() {
6  return (
7    <div>
8      <Form>
9        <WithValue>
10          {value => (
11            <div>
12              <p>The name is {value.name}</p>
13              <Field fieldName="name" label="Name" type={Text} />
14            </div>
15          )}
16        </WithValue>
17      </Form>
18    </div>
19  )
20}

Contributors

• @nicolaslopezj
• @fermuch
• @joadr
• @prinzdezibel

Running Tests

Clone the repository, install dependencies and run:

1yarn test