{"id":15654359,"url":"https://github.com/kouhin/rrr-lazy","last_synced_at":"2025-06-12T04:15:58.289Z","repository":{"id":65373261,"uuid":"60233724","full_name":"kouhin/rrr-lazy","owner":"kouhin","description":"Lazy load react component and lazy load data.","archived":false,"fork":false,"pushed_at":"2019-02-14T03:00:30.000Z","size":386,"stargazers_count":27,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T23:46:47.265Z","etag":null,"topics":["lazyload","react","react-router"],"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/kouhin.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":"2016-06-02T04:56:16.000Z","updated_at":"2019-02-14T03:00:32.000Z","dependencies_parsed_at":"2023-01-20T01:48:44.723Z","dependency_job_id":null,"html_url":"https://github.com/kouhin/rrr-lazy","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouhin%2Frrr-lazy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouhin%2Frrr-lazy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouhin%2Frrr-lazy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouhin%2Frrr-lazy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kouhin","download_url":"https://codeload.github.com/kouhin/rrr-lazy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251801085,"owners_count":21645968,"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":["lazyload","react","react-router"],"created_at":"2024-10-03T12:51:08.333Z","updated_at":"2025-04-30T23:46:56.749Z","avatar_url":"https://github.com/kouhin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"rrr-lazy\n=========================\n\nLazy load component with react \u0026\u0026 react-router.\n\n[![CircleCI](https://circleci.com/gh/kouhin/rrr-lazy/tree/master.svg?style=svg)](https://circleci.com/gh/kouhin/rrr-lazy/tree/master)\n[![dependency status](https://david-dm.org/kouhin/rrr-lazy.svg?style=flat-square)](https://david-dm.org/kouhin/rrr-lazy)\n\n## Installationg\nrrr-lazy requires **React 16.2.0 or later.**\n\nFor npm:\n```\nnpm install rrr-lazy\n```\n\nFor yarn:\n\n```\nyarn add rrr-lazy\n```\n\nIntersectionObserver is required by this library. You can use this polyfill for old browsers https://github.com/w3c/IntersectionObserver/tree/master/polyfill\n\n## Usage\n\n### Use as a common lazy component\n\n```javascript\nimport React from 'react';\nimport { Lazy } from 'rrr-lazy';\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cLazy\n      rootMargin=\"300px 0 300px 0\"\n      render={(status) =\u003e (\n        if (status === 'unload') {\n          return \u003cdiv\u003eUnload\u003c/div\u003e\n        }\n        if (status === 'loading') {\n          return \u003cdiv\u003eLoading\u003c/div\u003e\n        }\n        if (status === 'loaded') {\n          return (\n            \u003cimg\n              style={{ height: 762, width: 1024 }}\n              src={ status === 'loaded' ? 'http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' : `data:image/svg+xml,${encodeURIComponent('\u003csvg xmlns=\"http://www.w3.org/2000/svg\"/\u003e')}`}\n            /\u003e\n          );\n        }\n        throw new Error('Unknown status');\n      )}\n    /\u003e\n  \u003c/div\u003e\n);\n```\n\n### Loading data or do something else with lifecycle hooks\n\n```jsx\nimport { lazy } from 'rrr-lazy';\n\nasync function onLoading() {\n  // Loading data;\n  // ...\n  return data;\n}\nasync function onLoaded() {\n  // Do something on loaded\n  // ...\n  return result;\n}\n\nasync function onUnload() {\n  // Do something on unload\n  // ...\n  return result;\n}\n\nasync function onError(error) {\n  // Do something on error\n  console.error(error);\n  // ...\n  return result;\n}\n\nclass App extends React.Component {\n  render() {\n    // the matched child route components become props in the parent\n    return (\n      \u003cLazy\n        rootMargin=\"300px 0 300px 0\"\n        render={(status) =\u003e (\n          if (status === 'unload') {\n            return \u003cdiv\u003eUnload\u003c/div\u003e\n          }\n          if (status === 'loading') {\n            return \u003cdiv\u003eLoading\u003c/div\u003e\n          }\n          if (status === 'loaded') {\n            return (\n              \u003cimg\n                style={{ height: 762, width: 1024 }}\n                src={ status === 'loaded' ? 'http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' : `data:image/svg+xml,${encodeURIComponent('\u003csvg xmlns=\"http://www.w3.org/2000/svg\"/\u003e')}`}\n              /\u003e\n            );\n          }\n          throw new Error('Unknown status');\n        )}\n        onLoading={onLoading}\n        onLoaded={onLoaded}\n        onUnload={onUnload}\n        onError={onError}\n    /\u003e\n    )\n  }\n}\n```\n\n## API: `\u003cLazy root rootMargin render loaderComponent loaderProps onError onLoaded onUnload onUnloaded /\u003e`\n\n### Props\n\n#### `root`\nType: `String|HTMLElement` Default: `null`\n\nThis value will be used as root for IntersectionObserver (See [root](https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-root).\n\n#### `rootMargin`\nType: `String` Default: `null`\n\nThis value will be used as rootMargin for IntersectionObserver (See [rootMargin](https://www.w3.org/TR/intersection-observer/#dom-intersectionobserverinit-rootmargin).\n\n#### `render(status, props)`\nType: `Function` **Required**\n\n`status` can be `unload`, `loading`, `loaded`.\n\n`props` are props that passed from `Lazy`. This is designed for `@lazy`, and when you use `\u003cLazy\u003e` component, you may not need it.\n\n#### `loaderComponent`\nType: `string` Default: `div`\n\n#### `laoderProps`\nType: `string` Default: `{}`\n\n`loaderComponent` and `loaderProps` is used to create a LoaderComponent when status is `unload` or `loaded`.\n\nThe result of `render(status, props)` will be passed to LoaderComponent as `children`.\n\n#### onError()\n\n#### onLoaded()\n\n#### onLoading()\n\n#### onUnload()\n\n## API: `@lazy`\n\nUsage:\n\n``` javascript\n@routerHooks({\n  fetch: async () =\u003e {\n    await fetchData();\n  },\n  defer: async () =\u003e {\n    await fetchDeferredData();\n  },\n})\n@lazy({\n  render: (status, props, Component) =\u003e {\n    if (status === 'unload') {\n      return \u003cdiv style={{ height: 720 }}\u003eUnload\u003c/div\u003e;\n    } else if (status === 'loading') {\n      return \u003cdiv style={{ height: 720 }}\u003eLoading\u003c/div\u003e;\n    } else {\n      return \u003cComponent {...props} /\u003e;\n    }\n  },\n  onLoaded: () =\u003e console.log('look ma I have been lazyloaded!')\n})\nclass MyComponent extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cimg src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nOr\n\n``` javascript\nclass MyComponent extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cimg src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\nconst myComponent = lazy({\n  render: (status, props, Component) =\u003e {\n    if (status === 'unload') {\n      return \u003cdiv style={{ height: 720 }}\u003eUnload\u003c/div\u003e;\n    } else if (status === 'loading') {\n      return \u003cdiv style={{ height: 720 }}\u003eLoading\u003c/div\u003e;\n    } else {\n      return \u003cComponent {...props} /\u003e;\n    }\n  },\n  onLoaded: () =\u003e console.log('look ma I have been lazyloaded!')\n})(MyComponent);\n```\n\n### options\n\n#### getComponent\n\nWith webpack 2 import()\n\n``` javascript\nconst myComponent = lazy({\n  render: (status, props, Component) =\u003e {\n    if (status === 'unload') {\n      return \u003cdiv style={{ height: 720 }}\u003eUnload\u003c/div\u003e;\n    } else if (status === 'loading') {\n      return \u003cdiv style={{ height: 720 }}\u003eLoading\u003c/div\u003e;\n    } else {\n      return \u003cComponent {...props} /\u003e;\n    }\n  },\n  onLoaded: () =\u003e console.log('look ma I have been lazyloaded!'),\n  getComponent: () =\u003e import('./MyComponent'),\n})();\n```\n\n## API: LazyProvider\n\nYou can optionally use `LazyProvider` and pass a version (such as location) to the `value` prop.\nAll of the Lazy instances will be reset when version changed.\n\nExample:\n\n``` javascript\nclass Application extends React.Component {\n  render() {\n    // when pathname changed, all of the Lazy instances will be reset.\n    const { pathname, children } = this.state;\n    \u003cLazyProvider value={pathname}\u003e\n      { children }\n    \u003c/LazyProvider\u003e\n  }\n}\n```\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkouhin%2Frrr-lazy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkouhin%2Frrr-lazy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkouhin%2Frrr-lazy/lists"}