pro-branch v1.0.0

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, when evaluated to true renders the component that was specified. It gets passed the owner props. 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.

API

createBranch

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

applyUpdate

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