{"id":29118830,"url":"https://github.com/atticoos/render-if","last_synced_at":"2025-06-29T13:05:26.639Z","repository":{"id":57353463,"uuid":"51123482","full_name":"atticoos/render-if","owner":"atticoos","description":"⚛  Lightweight React control flow rendering ","archived":false,"fork":false,"pushed_at":"2017-06-06T00:01:23.000Z","size":18,"stargazers_count":144,"open_issues_count":7,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-27T03:23:31.398Z","etag":null,"topics":["javascript","react","react-native"],"latest_commit_sha":null,"homepage":"https://atticuswhite.com/blog/render-if-conditionally-render-react-components/","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/atticoos.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":"2016-02-05T03:24:19.000Z","updated_at":"2025-05-03T17:18:56.000Z","dependencies_parsed_at":"2022-09-15T16:52:09.671Z","dependency_job_id":null,"html_url":"https://github.com/atticoos/render-if","commit_stats":null,"previous_names":["ajwhite/render-if"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/atticoos/render-if","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atticoos%2Frender-if","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atticoos%2Frender-if/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atticoos%2Frender-if/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atticoos%2Frender-if/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atticoos","download_url":"https://codeload.github.com/atticoos/render-if/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atticoos%2Frender-if/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262191133,"owners_count":23272962,"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":["javascript","react","react-native"],"created_at":"2025-06-29T13:05:25.738Z","updated_at":"2025-06-29T13:05:26.614Z","avatar_url":"https://github.com/atticoos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# render-if\n[![License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://npmjs.org/package/render-if)\n[![NPM version](http://img.shields.io/npm/v/render-if.svg?style=flat)](https://npmjs.org/package/render-if)\n[![Build Status](http://img.shields.io/travis/ajwhite/render-if.svg?style=flat)](http://travis-ci.org/ajwhite/render-if)\n\nA tiny, yet conveniently curried way to render conditional React components. Works great with both React and React Native.\n\n```js\nrenderIf(predicate)(element)\n```\n\n## Installation\n\n```\nnpm install render-if --save\n```\n\nYou can also install the `eslint` plugin, [eslint-plugin-render-if](https://github.com/v-technologies/eslint-plugin-render-if)\n\n## What it looks like\n\n`renderIf` is a curried function that takes a predicate and returns a function accepting an element that will only be returned if the predicate is satisfied.\nThe function returned by `renderIf` will also accept a parameterless function which will only be invoked if the predicate is satisfied, allowing for lazy evaluation of inner JSX.\n\n```js\nrenderIf(1 + 1 === 2)(\n  \u003cText\u003eHello World!\u003c/Text\u003e\n)\n```\n\n### As an in-line expression\n\n```jsx\nclass MyComponent extends Component {\n  render() {\n    return (\n      {renderIf(1 + 2 === 3)(\n        \u003cspan\u003eThe universe is working\u003c/span\u003e\n      )}\n    );\n  }\n}\n```\n\n### As a lazy in-line expression\n\n```jsx\nclass MyComponent extends Component {\n  render() {\n    return (\n      {renderIf(1 + 2 === 3)(() =\u003e (\n        \u003cspan\u003eThis is only invoked if the universe is working\u003c/span\u003e\n      ))}\n    );\n  }\n}\n```\n\n### As a named function\n\n```jsx\nclass MyComponent extends Component {\n  render() {\n    const ifTheUniverseIsWorking = renderIf(1 + 2 === 3);\n    return (\n      {ifTheUniverseIsWorking(\n        \u003cspan\u003eThe universe is still wroking\u003c/span\u003e\n      )}\n    )\n  }\n}\n```\n\n### As a composed function\n```jsx\nconst ifEven = number =\u003e renderIf(number % 2 === 0);\nconst ifOdd = number =\u003e renderIf(number % 2 !== 0);\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      {ifEven(this.props.count)(\n        \u003cspan\u003e{this.props.count} is even\u003c/span\u003e\n      )}\n      {ifOdd(this.props.count)(\n        \u003cspan\u003e{this.props.count} is odd\u003c/span\u003e\n      )}\n    );\n  }\n}\n```\n\n## What it no longer looks like\n\n```jsx\nclass MyComponent extends Component {\n  render() {\n    var conditionalOutput;\n    if (1 + 1 === 2) {\n      conditionalOutput = \u003cspan\u003eI am rendered!\u003c/span\u003e;\n    } else {\n      conditionalOutput = \u003cspan\u003eI am not rendered :(\u003c/span\u003e;\n    }\n    return (\n      \u003cdiv\u003e\n        \u003c!-- this works, but it can get ugly --\u003e\n        {conditionalOutput}\n        {1 + 1 === 2 \u0026\u0026 \u003cspan\u003eI am rendered!\u003c/span\u003e}\n        {this.anotherConditionalRender()}\n      \u003c/div\u003e\n    );\n  }\n  anotherConditionalRender() {\n    if (1 + 1 === 2) {\n      return \u003cspan\u003eI am rendered!\u003c/span\u003e\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatticoos%2Frender-if","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatticoos%2Frender-if","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatticoos%2Frender-if/lists"}