https://github.com/nitin42/pro-branch
A small package that provides helpers to manage control flow in React
https://github.com/nitin42/pro-branch
control-flow react
Last synced: 4 months ago
JSON representation
A small package that provides helpers to manage control flow in React
- Host: GitHub
- URL: https://github.com/nitin42/pro-branch
- Owner: nitin42
- Created: 2018-02-08T11:37:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-08T11:50:49.000Z (over 7 years ago)
- Last Synced: 2025-02-01T11:34:45.209Z (4 months ago)
- Topics: control-flow, react
- Language: JavaScript
- Size: 41 KB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# pro-branch
> A small package that provides helpers to manage the control flow in React
# Install
```
npm install pro-branch
```
This also depends on `react` so make sure you already have installed it.
## Usage
**`createBranch`**
This function is quite similar to [Recompose's `branch`](https://github.com/acdlite/recompose/blob/master/docs/API.md#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 -
```js
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(, document.getElementById('root'));
// outputs =>
Call of Duty: World War II
```
`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
```js
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
{this.state.data}
}
}
ReactDOM.render(, 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](https://github.com/nitin42/pro-branch/blob/master/index.js#L8)**
## API
### createBranch
`
createBranch(
objects: Array
)(DefaultComponent: React$Element)(props)
`
### applyUpdate
`
applyUpdate(
objects: Array
)(defaultState)(props)
`