{"id":22058586,"url":"https://github.com/yosbelms/react-deco","last_synced_at":"2025-05-12T19:13:48.950Z","repository":{"id":32682169,"uuid":"139361960","full_name":"yosbelms/react-deco","owner":"yosbelms","description":":hotsprings: React utility belt to write functional components and declarative JSX code","archived":false,"fork":false,"pushed_at":"2022-12-10T05:49:15.000Z","size":189,"stargazers_count":29,"open_issues_count":8,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-12T19:13:39.390Z","etag":null,"topics":["declarative","if","jsx","map","pure","react","reactjs","view"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/yosbelms.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-07-01T21:03:13.000Z","updated_at":"2025-02-11T15:50:39.000Z","dependencies_parsed_at":"2023-01-14T21:55:01.332Z","dependency_job_id":null,"html_url":"https://github.com/yosbelms/react-deco","commit_stats":null,"previous_names":["yosbelms/react-declarative-flow"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosbelms%2Freact-deco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosbelms%2Freact-deco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosbelms%2Freact-deco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosbelms%2Freact-deco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yosbelms","download_url":"https://codeload.github.com/yosbelms/react-deco/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253805848,"owners_count":21967053,"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":["declarative","if","jsx","map","pure","react","reactjs","view"],"created_at":"2024-11-30T17:19:45.055Z","updated_at":"2025-05-12T19:13:48.927Z","avatar_url":"https://github.com/yosbelms.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Deco\n\n*React Deco* Give back to JSX what is JSX’s\n\n* [Overview](#overview)\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n  * [If](#if)\n  * [Switch/When](#switch/when)\n  * [Map](#map)\n  * [Bare](#bare)\n  * [Await](#await)\n\n## Overview\n\n*React Deco* is a library that aims to make React complex views more declarative, idiomatic, easy to read, and easy to write, by consequence more mantainables.\n\nThis library takes advantage of Render-Props pattern (effectively used by [React Router](https://reacttraining.com/react-router/web/api/Route) and [Downshift](https://github.com/paypal/downshift)) to make possible to write conditionals and loops in a more declarative way while reducing visual cluttering.\n\nLets write a simple table of products with two columns `Name` and `In Stock`. If `In Stock` is `0` then a message `Out of Stock` should be displayed. Currently we should write something like the following:\n\n```tsx\nfunction ProductTable({products}) {\n  return (\n    \u003ctable\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\n          \u003cth\u003eName\u003c/th\u003e\n          \u003cth\u003eIn Stock\u003c/th\u003e\n        \u003c/tr\u003e\n      \u003c/thead\u003e\n      {renderTableBody(products)}\n    \u003c/table\u003e\n  )\n}\n\nfunction renderTableBody(products) {\n  return (\n    \u003ctbody\u003e\n    {products.map((product) =\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e{product.name}\u003c/td\u003e\n        {(product.inStock \u003e 0)\n          ? \u003ctd\u003e{product.inStock}\u003c/td\u003e\n          : \u003ctd\u003eOut of Stock\u003c/td\u003e\n        }\n      \u003c/tr\u003e\n    )}\n    \u003c/tbody\u003e\n  )\n}\n```\n\nThis library will turn the above code into:\n\n```tsx\nfunction ProductTable({products}) {\n  return (\n    \u003ctable\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\n          \u003cth\u003eName\u003c/th\u003e\n          \u003cth\u003eIn Stock\u003c/th\u003e\n        \u003c/tr\u003e\n      \u003c/thead\u003e\n      \u003ctbody\u003e\n      \u003cMap target={products} with={(product) =\u003e\n        \u003ctr\u003e\n          \u003ctd\u003e{product.name}\u003c/td\u003e\n          \u003cIf test={product.inStock \u003e 0}\n            then={\u003ctd\u003e{product.inStock}\u003c/td\u003e}\n            else={\u003ctd\u003eOut of Stock\u003c/td\u003e}\n          /\u003e\n        \u003c/tr\u003e\n      }/\u003e\n      \u003c/tbody\u003e\n    \u003c/table\u003e\n  )\n}\n```\n\n## Installation\n\n```\n// with yarn\nyarn add react-deco\n\n// with npm\nnpm install react-deco\n```\n\n## Usage\n\n```ts\n// ES2015+ and TS\nimport {If, Map, Bare} from 'react-deco'\n\n// CommonJS\nvar ReactDeco = require('react-deco')\nvar If = ReactDeco.If\nvar Map = ReactDeco.Map\nvar Bare = ReactDeco.Bare\n```\n\n## Components\n\nReact-Deco exports some primitives wich holds reusable logic, to help developers to write *presentational logic* in JSX.\n\n### If\n\nConditionally render components based on the truthy-ness of evaluating the `test` prop. Render `then` if `test` evaluates to truthy, render `else` otherwise.\n\n```tsx\n\u003cIf\n  test={a \u003e b}\n  then={'a is greater then b'}\n  else={'a is not greater than b'}\n/\u003e\n```\n\nPassign functions in `then` and `else` makes the rendering process more efficient because only one of both branches is evalueted depending on truthy-ness of `test`. See [Short Circuit Evaluation](https://en.wikipedia.org/wiki/Short-circuit_evaluation)\n```tsx\n\u003cIf\n  test={a \u003e b}\n  then={() =\u003e 'a is greater then b'}\n  else={() =\u003e 'a is not greater than b'}\n/\u003e\n```\n\n### Switch/When\n\nRender the first `When` child whose`test` prop evaluates to `true`.\n\n```tsx\n\u003cSwitch\u003e\n  \u003cWhen test={a \u003e 1} render={() =\u003e \u003cdiv\u003e Foo \u003c/div\u003e} /\u003e\n  \u003cWhen test={true} render={() =\u003e \u003cdiv\u003e Default \u003c/div\u003e} /\u003e\n\u003c/Switch\u003e\n```\n\n### Map\n\nRender the result of dispatching to the `map` method of `target` passing the `with` function as the first argument.\n\n```tsx\n\u003cMap target={[1, 2, 3]} with={(item) =\u003e\n  \u003cdiv key={item}\u003e{item}\u003c/div\u003e\n} /\u003e\n```\n\n### Bare\n\n\u003e React Hooks addresses the same problem that this component was created for.\n\nA component that its `constructor`, `shouldComponentUpdate`, and lifecycle methods can be assigned via props\n\n```tsx\n\u003cBare shouldUpdate={shouldUpdateFn} render={() =\u003e\n  ...\n} /\u003e\n```\n\n`Bare` componets accept the following props:\n\n* `render`: `render(self)`\n* `constructor`: `constructor(self, props, ctx)`\n* `didCatch`: `didCatch(self)`\n* `didMount`: `didMount(self)`\n* `didUpdate`: `didUpdate(self, prevState)`\n* `shouldUpdate`: `shouldUpdate(self, nextState)`\n* `willUnmount`: `willUnmount(self)`\n\nAdditionaly, `Bare` components accepts a prop named `pureBy`. In case this property is provided the passed value will be used to compute the component purity using shallow comparison, if it is an array the shallow comparison will be computed by shallow-comparing each value in the array.\n\n```tsx\n\u003cBare pureBy={client} render={() =\u003e\n  \u003cdiv\u003e{client.name}\u003c/div\u003e\n  \u003cdiv\u003e{client.age}\u003c/div\u003e\n} /\u003e\n```\n\nThe above code will re-render only if one of the properties of the `client` object is different.\n\nBare components also contains a self reference called `self`, frequently useful to keep a reference to the component while destructuring in lifecycle params, example:\n\n```tsx\n\u003cBare pureBy={client} didMount={({setState, self, state}) =\u003e\n  // use self\n} /\u003e\n```\n\n`setState` can be used inside the constructor\n\n\n### Await\n\nRender components based on the state of a promise. Renders `then` prop when the promise is resolved. Renders `catch` prop when the promise is rejected. Renders `placeholder` while the promise is not resolved nor rejected.\n\n```tsx\nconst usersPromise = fetch('users')\n\u003cAwait promise={usersPromise} then={users =\u003e\n  ...\n} /\u003e\n```\n\n`Await` componets accept the following props:\n\n* `promise`\n* `then`\n* `catch`\n* `placeholder`\n\nPublished under MIT Licence\n\n(c) Yosbel Marin 2018","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyosbelms%2Freact-deco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyosbelms%2Freact-deco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyosbelms%2Freact-deco/lists"}