react-controllable-renderless v0.1.0

react-controllable-renderless

Inspired by react-powerplug, a set of 'pluggable' renderless components that provide logic for your 'dumb' components.

Unlike react-powerplug the state of these renderless components can also be optionally controlled.

Also:

• A Filter component.
• The Focus component provides a focus function to focus on the target (using refs).

Quick example

import { State } from 'react-controllable-renderless';
import { Pagination } from './components';

// State works exactly like react-powerplug
const StateExample = props =>
  <State
    { ...props }
    initial={{ offset: 0, limit: 10, totalCount: 200 }}
    render={ ({state, setState}) =>
      <Pagination {...state} onChange={offset => setState({ offset })} />
    }
  />

// But we can also control parts of its state, e.g. limit, by adding props
const ControlledExample = props =>
  <StateExample
    limit={props.limit}
    onStateChange={props.onStateChange}
  />

Renderless components

See react-powerplug for an introduction to using renderless components.

Note: You must use a render prop not the children prop.

Install

yarn add react-controllable-renderless

npm i react-controllable-renderless

Examples

See the storybook.

Components

• State
• Filter
• Focus
• Toogle

State

Props

In addition any part of the state can be controlled by passing a prop with the same name. E.g. to control state.age, pass in an age prop, <State age={} ... />, and use onStateChange to detect when age is trying to be changed.

Render props

Filter

Filters an array of items using a filterFunc that takes a query and items as arguments and return the filteredItems.

The query is updated by passing a new query to the refine render prop function.

In addition, query can be optionally controlled by passing a query prop and using onQueryChange to detect internal changes to the query.

Props

Render props

Focus

Like react-powerplug's Focus but also has focus and blur methods that use refs internally to allow a target element's focus to be controlled.

Props

Render props

Toggle

Props

Render props

TODO

• Tests
• Add children prop functionality
• Add compose functionality
• Add other react-powerplug components

Credits

I initially learnt about the power of renderless components and the 'render prop' pattern from downshift as well as the 'prop getter' pattern used in getTargetProps prop of the Focus component.

I also learnt more about these patterns from articles and courses by Michael Jackson and Ryan Florence.

And, of course, react-powerplug.

Thank you.