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
- Minimal API with
FormandField. - 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.
Install the base package
npm install simple-react-form
# or
yarn add simple-react-formimport React, { useState } from 'react'
import { Form, Field } from 'simple-react-form'
import DatePicker from './myFields/DatePicker'
import Text from './myFields/Text'
function PostsCreate() {
const [state, setState] = useState({})
return (
<div>
<Form state={state} onChange={setState}>
<Field fieldName="name" label="Name" type={Text} />
<Field fieldName="date" label="A Date" type={DatePicker} />
</Form>
<p>My name is {state.name}</p>
</div>
)
}- simple-react-form-material-ui Material UI set of fields.
- simple-react-form-bootstrap Bootstrap set of fields.
In this example, the current value of the form will be stored in a state variable using useState.
import React, { useState } from 'react'
import { Form, Field } from 'simple-react-form'
import DatePicker from './myFields/DatePicker'
import Text from './myFields/Text'
function PostsCreate() {
const [state, setState] = useState({})
return (
<div>
<Form state={state} onChange={setState}>
<Field fieldName="name" label="Name" type={Text} />
<Field fieldName="date" label="A Date" type={DatePicker} />
</Form>
<p>My name is {state.name}</p>
</div>
)
}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.
import React, { useRef } from 'react'
import { Form, Field } from 'simple-react-form'
import DatePicker from './myFields/DatePicker'
import Text from './myFields/Text'
function PostsCreate({ initialDoc }) {
const formRef = useRef()
const onSubmit = ({ name, date }) => {
// handle submit
}
return (
<div>
<Form ref={formRef} state={initialDoc} onSubmit={onSubmit}>
<Field fieldName="name" label="Name" type={Text} />
<Field fieldName="date" label="A Date" type={DatePicker} />
</Form>
<button onClick={() => formRef.current.submit()}>Submit</button>
</div>
)
}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.
import UploadImage from '../components/my-fields/upload'
<Field fieldName='picture' type={UploadImage} squareOnly={true}/>You must create a React component.
import React from 'react'
function UploadImage({ value, onChange, label, errorMessage }) {
return (
<div>
<p>{label}</p>
<div>
<img src={value} alt="preview" />
</div>
<TextField
value={value}
hintText="Image Url"
onChange={event => onChange(event.target.value)}
/>
<p>{errorMessage}</p>
</div>
)
}
export default UploadImageYou can view the full list of props here.
In React Native the API is the same, but wrap the form contents in a View component.
Example:
import React from 'react'
import { View, TextInput } from 'react-native'
function TextFieldComponent({ value, onChange }) {
return (
<View>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={onChange}
value={value}
/>
</View>
)
}
export default TextFieldComponentRender the form inside the desired component
import React, { useState } from 'react'
import Text from '../components/my-fields/text'
import { Form, Field } from 'simple-react-form'
import { View } from 'react-native'
function MyForm() {
const [state, setState] = useState({})
return (
<Form state={state} onChange={setState}>
<View>
<Field fieldName='email' type={Text}/>
<Field fieldName='password' type={Text}/>
</View>
</Form>
)
}You should always render your fields inside a View when using react native.
If you need to access the current form value in child components, use the WithValue component.
import React from 'react'
import { Form, Field, WithValue } from 'simple-react-form'
import Text from './myFields/Text'
function Example() {
return (
<div>
<Form>
<WithValue>
{value => (
<div>
<p>The name is {value.name}</p>
<Field fieldName="name" label="Name" type={Text} />
</div>
)}
</WithValue>
</Form>
</div>
)
}Clone the repository, install dependencies and run:
yarn test