@jf248/react-powerplug

A modified version of react-powerplug.

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 '@jf248/react-powerplug';
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 @jf248/react-powerplug

npm i @jf248/react-powerplug

Examples

See the storybook.

Components

• State
• Toogle
• Focus
• Filter

State

Props

prop	type	default	description
initial	object	undefined	The initial state.
onChange	function(state: object)	noop	This function is called any time the state is changed.

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 onChange to detect if the controlled component is trying to change state.

Render props

prop	type	description
state	object	The current state.
setState	function	State setter, same as setState from React.Component.

Toggle

Props

prop	type	default	description
initial	boolean	false	The initial/default state of the toggle.
on	bool	undefined	optional control prop
onChange	function(state: object)	noop	This function is called any time the state is changed.

Render props

prop	type	description
on	bool	True if current state.on in true.
off	bool	True if current state.on is false.
toggle	function	Function that toggles the state.
setOn	function	Function that sets state to on.

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 controlled by passing a query prop and using onChange to detect internal changes to the query.

Props

prop	type	default	description
defaultQuery	any	''	The default query.
filterFunc	function(items: array, query: any)	required	A function to filter the items.
items	array(any)	[]	The items to filter.
query	any	undefined	optional control prop
onChange	function(state: object)	noop	This function is called any time the state is changed.

Render props

prop	type	description
filteredItems	array(any)	The filtered items.
query	any	The current query.
refine	function(query: any)	This function takes a new query and updates the filteredItems.

Focus

Same funcitonality as 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

prop	type	default	description
focusProps	object	{ref: noop, onFocus: noop, onBlur: noop}	An optional property used to chain Focus components. See below.

Render props

prop	type	description
blur	function	Calling this function blurs the target.
focus	function	Calling this function focuses the target.
focused	boolean	The current focus state of the target.
getFocusProps	function(propToMerge={})	A function that returns the props for the target (the element we wish to focus) Example: <input { ...getFocusProps({onFocus: <handleFocus>}) } /> See this blog post on 'prop getters'.

Here's how to chain Focus elements:

<Focus>
 {({getTargetProps}) =>
   <Focus
     focusProps={getFocusProps()}
   >
     {({getFocusProps}) =>
       <input { ...getFocusProps() } />
     }
   </Focus>
 }
</Focus>

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.