react-with
⚡️Awesome render props components creation
Features
- simple api
- lifecycle support
Install
yarn add react-with --devornpm install --save react-with
Usage
Consider Toggle component example
import React from 'react';import With from 'react-with'; const onToggle = state setState event ; const Toggle = children initial <With = => on toggle <button =>Button: on ? 'on' : 'off'</button> </With>;
Props:
state - initial state object
lifecycle - object with React lifecycle hooks (componentDidMount, componentWillUnmount, etc) (see Fetch example)
render - if there is a necessity to use instead of children function
Each function passed to With Component receives self as a first argument.
self is an object and contains current state, setState, and other passed props to With component
Examples
Toggle
import React Component from 'react'; import With from 'react-with'; const onToggle = state setState ; const Toggle = children initial <With = => children </With>; // use<Toggle> on toggle <button =>Button: on ? 'on' : 'off'</button> </Toggle>
Fetch
import React from 'react';import PropTypes from 'prop-types'; import With from 'react-with'; const componentDidMount = setState url ; ;; const Fetch = url children render <With = = = = > children </With>; // use<Fetch => loading result loading ? 'Loading...' : <div>result</div> </Fetch>
License
MIT © matpaul