https://github.com/jschr/form-provider
React components for building forms and managing state.
https://github.com/jschr/form-provider
react react-forms react-helpers redux
Last synced: about 1 month ago
JSON representation
React components for building forms and managing state.
- Host: GitHub
- URL: https://github.com/jschr/form-provider
- Owner: jschr
- Created: 2016-07-31T01:53:54.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T23:17:29.000Z (over 2 years ago)
- Last Synced: 2025-04-12T03:46:33.060Z (about 1 month ago)
- Topics: react, react-forms, react-helpers, redux
- Language: TypeScript
- Homepage:
- Size: 332 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# form-provider
[](https://www.npmjs.com/package/form-provider)
[](https://travis-ci.org/jschr/form-provider)
A set of React helpers to help with building forms. State is managed with a Redux store that is local to your component. This promotes keeping your [ui state separate from your global application state](https://github.com/reactjs/redux/issues/1287#issuecomment-175351978) while still being able to use the redux ecosystem.
Demos:
* [Basic Example](http://form-provider-basic-example.surge.sh/)
## Installation
```bash
npm install --save react react-dom redux react-redux # peer dependencies
npm install --save form-provider
```
## Basic Usage
```js
// BasicForm.js
import { withForm, FormProvider, Field } from 'form-provider'
function createForm(props) {
return {
field1: props.field1,
obj: {
field2: 4
}
}
}
function BasicForm({ form, onSubmit }) {
return (
Basic Form
{({ value, setValue, error }) =>
Field1*
{ error && { error.message } }
}
{({ value, setValue }) =>
Field2
}
Save
Reset
)
}
export default withForm(createForm)(BasicForm)
```
Check out the [basic form example](examples/basic) for the entire source.
## Initial state
Setting initial form state is done by passing it into `withForm`
```js
...
export default withForm({
user: {
firstName: 'john'
}
})(BasicForm)
// or as a function of props
export default withForm(props => ({
user: props.user
}))(BasicForm)
```
## Validation
This lib currently doesn't provide any validation functions out of the box, only an API to provide your own. Validators are functions that accept the current value and return a promise. Pass in a single validator or an array to the `` component. The form won't submit until all validators are resolved.
```js
// validators.js
export const isRequired = (name) => (value) => new Promise((resolve, reject) => {
if (!value) return reject(new Error(`${name} is required`))
resolve()
})
export const isNotNumber = (name) => (value) => new Promise((resolve, reject) => {
if (!isNaN(value)) return reject(new Error(`${name} must not be a number`))
resolve()
})
```
## Binding to form state
Use the `connectForm` function to map form state to props. This function has the exact same API as react-redux's `connect` function. You can use this to conditionally display fields or other rendering logic based on the current form's state.
```js
import { compose } from 'redux'
import { withForm, FormProvider, Field, connectForm } from 'form-provider'
function mapFormStateToProps(formState) {
return {
userFormState: formState.user,
allErrors: formState.errors
}
}
function BasicForm({ userFormState, allErrors, form, onSubmit }) {
...
})
export default compose(
withForm(createForm)
connectForm(mapFormStateToProps)
)(withForm)
```
## Alternatives
- [React Redux Form](https://github.com/davidkpiano/react-redux-form): Personal favourite, similar API.
- [Redux Form](https://github.com/erikras/redux-form): More features out of the box, mature and popular.
- [React Forms](https://github.com/prometheusresearch/react-forms): Validate with JSONSchema, no redux dependency