Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marmelab/redux-form-inspector
An HOC for computing dynamic props from values inside an existing redux-form component.
https://github.com/marmelab/redux-form-inspector
redux redux-form
Last synced: about 2 months ago
JSON representation
An HOC for computing dynamic props from values inside an existing redux-form component.
- Host: GitHub
- URL: https://github.com/marmelab/redux-form-inspector
- Owner: marmelab
- License: mit
- Created: 2017-05-15T10:05:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:13:33.000Z (almost 2 years ago)
- Last Synced: 2024-04-25T18:02:36.780Z (8 months ago)
- Topics: redux, redux-form
- Language: JavaScript
- Homepage: https://github.com/marmelab/redux-form-inspector
- Size: 1.64 MB
- Stars: 11
- Watchers: 10
- Forks: 1
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# redux-form-inspector
[](https://travis-ci.org/marmelab/redux-form-inspector)
An HOC for computing dynamic props from values inside an existing [redux-form](https://github.com/erikras/redux-form) component.
- [Installation](#installation)
- [Usage](#installation)
- [API](#api)
## Installation
Install with:
```sh
npm install -S redux-form-inspector
```
or
```sh
yarn add redux-form-inspector
```
## Usage
[Redux-form](https://github.com/erikras/redux-form) is a fantastic library which let you create forms inside your react application. In the following example, we create a simple form component with `hello` as an unique identifier thanks to the [reduxForm](http://redux-form.com/6.7.0/docs/api/ReduxForm.md/) HOC .
```js
import React from 'react';
import { Field, reduxForm } from 'redux-form';
export const HelloForm = ({ handleSubmit }) => (
Submit
);
export default reduxForm({ form: 'hello' })(HelloForm);
```
`redux-form-inspector` let you add some `dynamic props` to you component (wrapped by your HOC) who are based on the values `of any registered form` of your application. For example, you can disable fields, change the background color of your form, ... the sky is the limit.
```js
import React from 'react';
import { compose } from 'recompose';
import { Field, reduxForm } from 'redux-form';
import formInspector from 'redux-form-inspector';
export const HelloForm = ({ handleSubmit, backgroundColor, showSecret }) => (
{showSecret && Hello John}
Submit
);
export const fieldsToProps = {
backgroundColor: ({ message }) => message.includes('hello') ? 'red' : 'blue',
showSecret: ({ message, email }) => message.length > 0 && email === '[email protected]'
};
export default compose(
reduxForm({ form: 'hello' }),
formInspector({ form: 'hello', fieldsToProps }),
)(HelloForm);
```
## API
The `formInspector` function take a configuration object of the following form as input. In result of this call, it return a new HOC which can be used on any component (not just form).
```js
const fieldsToProps = {
mySubprop: (fields, errors) => { ... },
...
};
const myCustomFormInspector = formInspector({
form: 'myForm', // The redux-form instance identifier
fieldsToProps, // An empty object by default
inspectorKey: 'myInspectorPropKey' // [optionnal] no "sub-prop" by default
});
```
#### form
The form name must be the same as the name you have passed to the [reduxForm](http://redux-form.com/6.7.0/docs/api/ReduxForm.md/) on the form that you're inspect. In the previous example, the form name was `hello`.
If the provided form name does not exist or is not registred by `redux-form`, each value of the resulting `fieldsToProps` object will be equal to `null`.
#### fieldsToProps
`fieldsToProps` is the most important part of `redux-form-inspector`. It is defined as a simple object with a prop name as key and a callback as value. At runtime, each callback is executed with the form field values and errors (both sync and async) as arguments. Each result is assigned to the following prop name.
The strength of `fieldsToProps` lies in the fact that it can be easily tested.
#### inspectorKey [optionnal]
This attribute let you assign a custom root key for your `fieldsToProps` result object.
If not specified, `formInspector` will merge the `fieldsToProps` result object inside your existing component props.
## Contributing
Run the tests with this command:
```sh
make test
```
## Maintainer
[](https://github.com/jdemangeon)
[Julien Demangeon](https://github.com/jdemangeon)
## License
redux-form-inspector is licensed under the [MIT License](LICENSE), courtesy of [Marmelab](http://marmelab.com).