{"id":23366763,"url":"https://github.com/d8corp/react-def","last_synced_at":"2025-04-07T23:15:57.193Z","repository":{"id":42905155,"uuid":"250781807","full_name":"d8corp/react-def","owner":"d8corp","description":"Deferring of the components rendering","archived":false,"fork":false,"pushed_at":"2023-01-05T10:41:22.000Z","size":698,"stargazers_count":2,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T09:03:58.035Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d8corp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-28T11:51:29.000Z","updated_at":"2020-10-08T13:58:50.000Z","dependencies_parsed_at":"2023-02-04T01:30:50.751Z","dependency_job_id":null,"html_url":"https://github.com/d8corp/react-def","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Freact-def","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Freact-def/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Freact-def/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Freact-def/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d8corp","download_url":"https://codeload.github.com/d8corp/react-def/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744328,"owners_count":20988783,"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":[],"created_at":"2024-12-21T14:17:43.105Z","updated_at":"2025-04-07T23:15:57.170Z","avatar_url":"https://github.com/d8corp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-def\n[![NPM](https://img.shields.io/npm/v/react-def.svg)](https://www.npmjs.com/package/react-def)\n[![NPM](https://img.shields.io/npm/dm/react-def.svg)](https://www.npmjs.com/package/react-def)\n[![license](https://img.shields.io/npm/l/html-classes)](https://github.com/d8corp/react-def/blob/master/LICENSE)  \n\nUse the component when DOM changes or component rendering take a lot of time.\n## Installation\n```bash\nnpm i react-def\n# or\nyarn add react-def\n```\n## Using\nThe best way of using the component is to do it with elements that show self only on hover.  \nThe rendering of the components starts working only when the whole app will be rendered and displayed.  \nThen `Def` components will render one by one as quickly as we can have `60fps`.\n```typescript jsx\nimport Def from 'react-def'\nconst TEN = [...new Array(10)]\n\n\nconst Throttling = ({value = 10, children}) =\u003e {\n  const end = Date.now() + value\n  while (Date.now() \u003c end) {\n    continue\n  }\n  return children\n}\n\nconst SimpleComponent = () =\u003e (\n  \u003cdiv\u003e\n    {TEN.map((v, i) =\u003e (\n      \u003cdiv key={i}\u003e\n        {TEN.map((v, j) =\u003e (\n          \u003cThrottling key={j}\u003e\n            ({i}.{j})\n          \u003c/Throttling\u003e\n        ))}\n      \u003c/div\u003e\n    ))}\n  \u003c/div\u003e\n)\n\nconst DefComponent = () =\u003e (\n  \u003cdiv\u003e\n    {TEN.map((v, i) =\u003e (\n      \u003cdiv key={i}\u003e\n        \u003cDef\u003e\n          {TEN.map((v, j) =\u003e (\n            \u003cThrottling key={j}\u003e\n              ({i}.{j})\n            \u003c/Throttling\u003e\n          ))}\n        \u003c/Def\u003e\n      \u003c/div\u003e\n    ))}\n  \u003c/div\u003e\n)\n```\nTry to use the `SimpleComponent` and the `DefComponent` and you see the difference.  \nAlso, you can provide property of the `placeholder` to show something wile it's rendering.\n```typescript jsx\nconst DefComponentPredefine = () =\u003e (\n  \u003cdiv\u003e\n    {TEN.map((v, i) =\u003e (\n      \u003cdiv key={i}\u003e\n        \u003cDef placeholder='loading...'\u003e\n          {TEN.map((v, j) =\u003e (\n            \u003cThrottling key={j}\u003e\n              ({i}.{j})\n            \u003c/Throttling\u003e\n          ))}\n        \u003c/Def\u003e\n      \u003c/div\u003e\n    ))}\n  \u003c/div\u003e\n)\n```\nIf you wanna defer the rendering only once use `once` property.\n```typescript jsx\nconst DefComponentPredefine = () =\u003e (\n  \u003cdiv\u003e\n    {TEN.map((v, i) =\u003e (\n      \u003cdiv key={i}\u003e\n        \u003cDef once\u003e\n          {TEN.map((v, j) =\u003e (\n            \u003cThrottling key={j}\u003e\n              ({i}.{j})\n            \u003c/Throttling\u003e\n          ))}\n        \u003c/Def\u003e\n      \u003c/div\u003e\n    ))}\n  \u003c/div\u003e\n)\n```\n## Issues\nIf you find a bug, please file an issue on [GitHub](https://github.com/d8corp/react-def/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd8corp%2Freact-def","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd8corp%2Freact-def","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd8corp%2Freact-def/lists"}