react-state-focus

Lens-based events dispatching for React forms

Programming language: JavaScript

Tags: Code Design     React     React-component     Component     Reactjs    

Latest version: v1.0.1

README

React state focus

Install

NPM:

$ npm install --save react-state-focus

YARN:

$ yarn add react-state-focus

Usage

1. Lens

That's a base class for all other classes in this package. You can use it for example, for propTypes validation.

1. 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

1. 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'

1. 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).

1. 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.