{"id":16783515,"url":"https://github.com/tkh44/react-pattern-match","last_synced_at":"2025-04-10T22:18:09.953Z","repository":{"id":57342306,"uuid":"80765889","full_name":"tkh44/react-pattern-match","owner":"tkh44","description":"Render based on assertions","archived":false,"fork":false,"pushed_at":"2017-09-26T17:36:39.000Z","size":19,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T22:18:04.505Z","etag":null,"topics":["match","pattern-matching","react","react-component"],"latest_commit_sha":null,"homepage":"","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/tkh44.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-02T20:31:06.000Z","updated_at":"2019-04-11T17:41:45.000Z","dependencies_parsed_at":"2022-09-16T02:50:32.859Z","dependency_job_id":null,"html_url":"https://github.com/tkh44/react-pattern-match","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkh44%2Freact-pattern-match","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkh44%2Freact-pattern-match/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkh44%2Freact-pattern-match/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkh44%2Freact-pattern-match/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tkh44","download_url":"https://codeload.github.com/tkh44/react-pattern-match/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248305855,"owners_count":21081577,"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":["match","pattern-matching","react","react-component"],"created_at":"2024-10-13T07:49:56.207Z","updated_at":"2025-04-10T22:18:09.923Z","avatar_url":"https://github.com/tkh44.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-pattern-match\n\n[![npm version](https://badge.fury.io/js/react-nes.svg)](https://badge.fury.io/js/react-pattern-match)\n[![Build Status](https://travis-ci.org/tkh44/react-pattern-match.svg?branch=master)](https://travis-ci.org/tkh44/react-pattern-match)\n[![codecov](https://codecov.io/gh/tkh44/react-pattern-match/branch/master/graph/badge.svg)](https://codecov.io/gh/tkh44/react-pattern-match)\n\n```bash\nnpm install -S react-pattern-match\n```\n\nIs this really pattern matching? No, but it is fun to pretend.\n\n**For React 16 and above only**\n\n\n### Basic\n\n```javascript\nconst App = (props) =\u003e {\n  return (\n    \u003cMatch \n      value={4}\n      render={eq =\u003e [\n        eq(4, () =\u003e \u003cBox name=\"I will render\" /\u003e),\n        eq(5, () =\u003e \u003cBox name=\"I will not render\" /\u003e),\n        eq(() =\u003e 4, () =\u003e \u003cBox name=\"I will render, fn value is equal\" /\u003e)\n      ]} \n    /\u003e\n  )\n}\n```\n\n## Match\n\n`Match` uses [`lodash.isEqual`](https://lodash.com/docs/#isEqual) to compare a given value vs one provided in the render callback.\n\n*From the lodash docs*\n\u003e Performs a deep comparison between two values to determine if they are equivalent.\n\u003e  Note: This method supports comparing arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, \u003e \u003e  and typed arrays. Object objects are compared by their own, not inherited, enumerable properties. Functions and DOM nodes are compared by strict equality, i.e. ===.\n\n**props**\n\n- `value`: **any** - Base value to compare against\n\n- `render`: **function** - Function that receives one argument, `equal`\n    \n    `equal` is a function that accepts 2 arguments:\n        \n    - `test`: **any** - Value to compare against value supplied in props\n    \n    - `render`: **function** - Function that returns children. Called only if `lodash.isEqual(value, test)`\n\n\n### Function as Value\n\nIf the `value` prop or `test` value are functions they will be called before being passed to `lodash.isEqual`.\n\n```javascript\nfunction getValue () {\n  return ['a', 'b', 'c']\n}\n\nconst App = (props) =\u003e {\n  return (\n    \u003cMatch\n      value={getValue}\n      render={eq =\u003e [\n        eq(['a', 'b', 'c'], () =\u003e \u003cBox name=\"should match array\" /\u003e),\n        eq(['a', 'b', 'c', 'd'], () =\u003e\n          \u003cBox name=\"should not match array\" /\u003e\n        ),\n        eq(() =\u003e ['a', 'b', 'c'], () =\u003e \u003cBox name=\"should match fn\" /\u003e),\n        eq(\n          () =\u003e ['a', 'b', 'c', 'd'],\n          () =\u003e \u003cBox name=\"should not match fn\" /\u003e\n        )\n      ]}\n    /\u003e\n  )\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkh44%2Freact-pattern-match","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftkh44%2Freact-pattern-match","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkh44%2Freact-pattern-match/lists"}