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:
import { StateBoundLens } from 'react-state-focus';
// ... in your component
constructor() {
this.state = { user: 1 }
const lens = new StateBoundLens(this, 'user');
}
// .. that can be used later
console.log(this.lens.view());
// => 1
this.lens.set(2)
console.log(this.state.user)
// => 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)
import { Record } from 'immutable';
import { PropertyLens } from 'react-state-focus';
const User = Record({ email: '' });
const user = new User({ email: '[email protected]' });
const emailLens = new PropertyLens('email');
emailLens.view(user)
// => '[email protected]'
newUser = emailLens.set('new-email', user);
emailLens.view(newUser)
// => 'new-email'- LensChain
That's a class that does composition under the hood.
import { StateBoundLens, PropertyLens, LensChain } from 'react-state-focus';
class YourForm extends React.Component {
constructor(props, context) {
super(props, context);
this.state = { user: new User() };
this.lens = new LensChain(
new StateBoundLens(this, 'user')
);
}
render() {
const { lens } = this;
return (
<form>
<EmailInput lens={lens.chain(new PropertyLens('email'))} />
<ProfileInput lens={lens.chain(new PropertyLens('profile'))} />
</form>
);
}
}EmailInput may look like:
(props) =>
<input type="text" value={props.lens.view()} onChange={(e) => props.lens.set(e.target.value)}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
type="checkbox"
checked={lens.view()}
onChange={e => lens.set(e.target.checked)}
/>
)
Checkbox.propTypes = {
lens: PropTypes.instanceOf(Lens)
}
export default LensBoundComponent(Checkbox);See tests/ directory for more specific details.
Also a demo repo is available.