react-renderless 🖇
Utilities for creating and working with renderless React components.
What is a "renderless component"? A renderless component is the opposite of a stateless component. It does not implement a render method. Instead, renderless components are composed with stateless functional components to create UI elements.
Usage
Script
const StateProvider withRender = reactRenderless
Package
yarn add react-renderless# OR npm install --save react-renderless
// commonjsconst StateProvider withRender = // es moduleimport StateProvider withRender from "react-renderless"
API
StateProvider Component
Instead of extending React.Component for renderless components, extend StateProvider.
StateProviderpropTypes = children: PropTypesfunc // pass either children or render render: PropTypesfunc // pass either children or render initialState: PropTypesobject // optional
-
The render prop will be called with 2 arguments:
(props, context)
where props is{...this.props, ...this.state, ...this.handlers}
. The prop should either berender
or a the only child of the parent. The render prop must return an element when called (not a component class!). -
Initial state: The component's initial state can be set by passing a prop or by setting an
initialState
getter on the class. -
Handlers: An object that provides all the actions needed to modify the state. It is initiated one time, at mount. Handlers that need to be bound to the component instance should use arrow functions for declaration. (This will not create additional functions in each render.)
{ return foo: "bar" ; } { return this ; } const App = <SimpleState = = /> // renders "baz" because the initialState prop overrides the getter
withRender Higher-Order Component
withRender
combines a container and presenter (renderless and stateless) into a new component that acts like a normal React component. Under the hood it simply passes the presenter as the render prop to the renderless component.
const Combined = const App = <Combined = />
withRender
is curried so it can either be with 1 argument to create a factory for a stateful component or 2 to create a new component immediately.
const textStateFactory = const TextInput = const BigTextInput =
Examples
Codepen
Textboxesconst Input = text setText <input = = />; { return this ; } { return text: "" ; } { return this ; } { return this ; } const TextInput = <Text >Input</Text>;const UpperTextInput = ; const App = <div> <TextInput = /> TextInput <br /> <UpperTextInput /> UpperTextInput <br /> <LowerTextInput = /> LowerTextInput </div>; ReactDOM;
Codepen
Reducer { const reducer = foo: foo bar: thisstatebar + 1 bar: thisstatebar - 1 ; return { if !reducertype this; this; } ; } const App = <Reducer => action ...state <div> <p> <b>Foo</b> <input = = /> </p> <p> <b>Bar</b> <button =>+</button> <span>statebar</span> <button =>+</button> </p> </div> </Reducer>; ReactDOM;
Inspiration
- Recompose by Andrew Clark
- React Powerplug by Renato Ribeiro
- Use a Render Prop! by Michael Jackson