nitin42 / pro-branch

A small package that provides helpers to manage control flow in React

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 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

API

createBranch

createBranch( objects: Array )(DefaultComponent: React$Element)(props)

applyUpdate

applyUpdate( objects: Array )(defaultState)(props)