react-controllable

A higher-order-component to add overwritable internal state to a react component. The wrapped will act like a controlled component (for example, an <input />).

Installation

npm install --save @ngard/react-controllable

or, if you are using Yarn

yarn add @ngard/react-controllable

Use

controllable accepts three arguments for configuration, and returns a function that accepts a React component to wrap. That function returns a controllable React component.

Signature

controllable(initialState, mapControllersToState, [options])(Component)
// returns React component that accepts the same props as Component as well as notifier props

Arguments

Example

import { controllable } from '@ntgard/react-controllable';

// ...

const initialState = { count: 0 };
const mapControllersToState = {
  inc: ({ count }) => ({ count + 1 }),
  dec: ({ count }) => ({ count - 1 }),
  reset: { count: 0 },
}
const ControllableCounter = controllable(initialState, mapControllersToState)(Counter);

// ...

{/* With no overrides, this counter starts at 0 and increments and decrements by 1 */}
<ControllableCounter />

{/* This counter is controlled. It starts at 10 and increments and decrements by 2 */}
let c = 10;
<ControllableCounter count={c} inc={() => { c += 2; }} dec={() => { c -= 2; }} />

License

MIT