{"id":16513701,"url":"https://github.com/nitin42/pro-branch","last_synced_at":"2025-06-22T16:36:37.063Z","repository":{"id":57330717,"uuid":"120753659","full_name":"nitin42/pro-branch","owner":"nitin42","description":"A small package that provides helpers to manage control flow in React","archived":false,"fork":false,"pushed_at":"2018-02-08T11:50:49.000Z","size":42,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-06T01:02:52.678Z","etag":null,"topics":["control-flow","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitin42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-08T11:37:13.000Z","updated_at":"2018-12-05T14:10:31.000Z","dependencies_parsed_at":"2022-09-21T04:03:05.174Z","dependency_job_id":null,"html_url":"https://github.com/nitin42/pro-branch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nitin42/pro-branch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Fpro-branch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Fpro-branch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Fpro-branch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Fpro-branch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin42","download_url":"https://codeload.github.com/nitin42/pro-branch/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Fpro-branch/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261326112,"owners_count":23142019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["control-flow","react"],"created_at":"2024-10-11T16:09:59.783Z","updated_at":"2025-06-22T16:36:36.993Z","avatar_url":"https://github.com/nitin42.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pro-branch\n\n\u003e A small package that provides helpers to manage the control flow in React\n\n# Install\n\n```\nnpm install pro-branch\n```\n\nThis also depends on `react` so make sure you already have installed it.\n\n## Usage\n\n**`createBranch`**\n\nThis 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\nproperties, `when` and `render`.\n\n`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 -\n\n```js\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst { createBranch } = require('pro-branch');\nconst { FPS, Sports, Default } = require('./components');\n\nconst branched = createBranch([\n  {\n    when: (props) =\u003e props.type === 'FPS',\n    render: FPS,\n  },\n  {\n    when: (props) =\u003e props.type === 'Sports',\n    render: Sports,\n  },\n])(Default)\n\nconst Game = (props) =\u003e branched(props)\n\nReactDOM.render(\u003cGame type=\"FPS\" /\u003e, document.getElementById('root'));\n\n// outputs \u003cFPS /\u003e =\u003e \u003cdiv\u003eCall of Duty: World War II\u003c/div\u003e\n```\n\n`createBranch` returns a function that takes the props to apply and creates a React element.\n\n**`applyUpdate`**\n\nThis 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\n\n```js\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst { applyUpdate } = require('pro-branch');\n\nclass Game extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = { data: '__DEFAULT__GAME__NAME__' }\n  }\n\n  componentDidMount() {\n    this.update(this.props)\n  }\n\n  update = applyUpdate([\n    {\n      when: ({ type }) =\u003e type === 'FPS',\n      update: (props) =\u003e this.setState({ data: 'Call of Duty: World War II' });\n      }\n    },\n    {\n      when: ({ type }) =\u003e type === 'Sports',\n      update: (props) =\u003e this.setState({ data: 'FIFA 18' }),\n    },\n  ])(this.state)\n\n  render() {\n    return \u003cdiv\u003e{this.state.data}\u003c/div\u003e\n  }\n}\n\nReactDOM.render(\u003cGame type=\"FPS\" /\u003e, document.getElementById('root'));\n```\n\n`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.\n\nI 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`.\n\n**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)**\n\n## API\n\n### createBranch\n\n`\ncreateBranch(\n  objects: Array\n)(DefaultComponent: React$Element)(props)\n`\n\n### applyUpdate\n\n`\napplyUpdate(\n  objects: Array\n)(defaultState)(props)\n`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Fpro-branch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin42%2Fpro-branch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Fpro-branch/lists"}