A small package that provides helpers to manage the control flow in React
npm install pro-branch
This also depends on react
so make sure you already have installed it.
createBranch
This function is quite similar to Recompose's branch
helper. It takes an array of objects where each object has two
properties, when
and render
.
when
accepts a function which gets passed the owner props. If it returns true then it renders the component that was specified. It . Here is an example -
const React = require('react');
const ReactDOM = require('react-dom');
const { createBranch } = require('pro-branch');
const { FPS, Sports, Default } = require('./components');
const branched = createBranch([
{
when: (props) => props.type === 'FPS',
render: FPS,
},
{
when: (props) => props.type === 'Sports',
render: Sports,
},
])(Default)
const Game = (props) => branched(props)
ReactDOM.render(<Game type="FPS" />, document.getElementById('root'));
// outputs <FPS /> => <div>Call of Duty: World War II</div>
createBranch
returns a function that takes the props to apply and creates a React element.
applyUpdate
This function is similar to createBranch
but the only difference is that, the object has a update
property instead of render
. So in this case, if predicate is true
then the update function is called. Here is an example
const React = require('react');
const ReactDOM = require('react-dom');
const { applyUpdate } = require('pro-branch');
class Game extends React.Component {
constructor(props) {
super(props)
this.state = { data: '__DEFAULT__GAME__NAME__' }
}
componentDidMount() {
this.update(this.props)
}
update = applyUpdate([
{
when: ({ type }) => type === 'FPS',
update: (props) => this.setState({ data: 'Call of Duty: World War II' });
}
},
{
when: ({ type }) => type === 'Sports',
update: (props) => this.setState({ data: 'FIFA 18' }),
},
])(this.state)
render() {
return <div>{this.state.data}</div>
}
}
ReactDOM.render(<Game type="FPS" />, document.getElementById('root'));
applyUpdate
also returns a function that takes props or some other data, and then calls the update function which gets passed those prop values or the data.
I am using these two helpers in my current project and I think it organises the control flow structure in a better way rather than using switch
or nested if else
.
Don't want to use it as a dependency ? You can find the full source code here
createBranch( objects: Array )(DefaultComponent: React$Element)(props)
applyUpdate( objects: Array )(defaultState)(props)