React state focus
Install
NPM:
$ npm install --save react-state-focus
YARN:
$ yarn add react-state-focus
Usage
- Lens
That's a base class for all other classes in this package.
You can use it for example, for propTypes
validation.
- StateBoundLens
This class creates a lens for a part of component's state:
;// ... in your component{thisstate = user: 1const lens = this 'user';}// .. that can be used laterconsole;// => 1thislensconsole// => 2
- PropertyLens
This class creates an abstract lens that can be applied on immutable
record
(or map, or absolutely anything that supports []
to get an attribute and .set(prop, value)
to set)
;;const User = ;const user = email: 'email@example.com' ;const emailLens = 'email';emailLens// => 'email@example.com'newUser = emailLens;emailLens// => 'new-email'
- LensChain
That's a class that does composition under the hood.
import StateBoundLens PropertyLens LensChain from 'react-state-focus';Component{;thisstate = user: ;thislens =this 'user';}{const lens = this;return<form><EmailInput = /><ProfileInput = /></form>;}
EmailInput
may look like:
props<input ="text" = =
This class also has a shortcut .chain(new PropertyLens(attribute))
-> .chainProperty(attribute)
.
- LensBoundComponent
LensBoundComponent
is a Higher-order component that prevents redundant updates
when lens returns the same value. It does a ===
comparison between previous and current values.
import Lens LensBoundComponent from 'react-state-focus';const Checkbox = lens<input="checkbox"==/>CheckboxpropTypes =lens: PropTypesCheckbox;
See tests/
directory for more specific details.
Also a demo repo is available.