{"id":15707234,"url":"https://github.com/tomarrell/r2d2","last_synced_at":"2025-05-12T19:42:40.266Z","repository":{"id":57342990,"uuid":"122430998","full_name":"tomarrell/R2D2","owner":"tomarrell","description":"React HOC for ensuring data from store, otherwise dispatching for it","archived":false,"fork":false,"pushed_at":"2023-03-01T16:56:27.000Z","size":294,"stargazers_count":5,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T18:29:03.179Z","etag":null,"topics":["higher-order-component","react","redux"],"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/tomarrell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-22T04:33:45.000Z","updated_at":"2023-09-04T06:45:12.000Z","dependencies_parsed_at":"2024-10-24T07:46:50.129Z","dependency_job_id":"b80c77e3-e54a-436a-bc90-0ac4ee229c71","html_url":"https://github.com/tomarrell/R2D2","commit_stats":{"total_commits":46,"total_committers":2,"mean_commits":23.0,"dds":0.04347826086956519,"last_synced_commit":"499105aa6314c559c80fe53c141250863b394f32"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomarrell%2FR2D2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomarrell%2FR2D2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomarrell%2FR2D2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomarrell%2FR2D2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomarrell","download_url":"https://codeload.github.com/tomarrell/R2D2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253809566,"owners_count":21967746,"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":["higher-order-component","react","redux"],"created_at":"2024-10-03T20:38:29.909Z","updated_at":"2025-05-12T19:42:40.234Z","avatar_url":"https://github.com/tomarrell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://i.imgur.com/LXTmHwZ.jpg\" width=\"200px\"\u003e\n\n[![npm version](https://badge.fury.io/js/react-r2d2.svg)](https://badge.fury.io/js/react-r2d2)\n\n# R2D2\nA React Higher Order Component (HOC) for ensuring your data makes it to your component in time. This was inspired to reduce the code required for the common use case of retrieving data from the Redux store, and dispatching an action to fetch it if it is non-existent.\n\nIt currently supports Redux out of the box, and any store that it can retrieve from context under the store key. Please feel welcome to contribute support for other libraries as well.\n\n*WIP: Currently in testing, during this time the API is experimental and subject to change.*\n\n## Usage\nInstall the latest stable version:\n\n```\nnpm i react-r2d2\n```\n\nWe currently support [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1.1), [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), and [ES](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) module types. If you like to live on the edge and use Rollup, feel free to use that as well.\n\n## Running the tests\nTo run the tests included with the package. Run the command:\n\n```\nnpm run test\n```\n\nThe test suit is written using Mocha for execution and Chai for expect-style assertions. It also utilizes Enzyme for DOM and React component manipulation.\n\n## API\nCalling the HOC with passing in your component as the argument, you will be returned a new component which will accept the following props.\n\n### Required props\n- **selector**, *function*: This is the Redux selector method to select the portion of store you would like to validate.\n\n- **action**, *{ type: String, payload: Any }*: The Redux action you would like to dispatch to fetch the data to populate the selected portion of the store.\n\n### Optional props\n- **validateStore**, *function*: this is an optional function that will determine the validity of the selected portion of store to fulfill the wrapped components requirements. This will default to a simple `selectedState =\u003e !!selectedState` boolean check.\n\n- **altComponent**, *node*: this optional node will be shown while the validity of the selected state is false. This could be a React component, or a simple text node. This is ideal for placing a loading component while the data is being fetched.\n\n## Usage\nAn example of this HOC in the wild.\n\n###### Component.js\n```javascript\nimport React from 'react';\nimport R2D2 from 'react-r2d2';\n\nconst Component = ({ data }) =\u003e {\n  return (\n    \u003cdiv\u003eI will always render with {data}\u003c/div\u003e\n  );\n};\n\nexport default R2D2(Component);\n```\n\n###### Container.js\n```javascript\nimport React, { Component } from 'react';\n\nimport WrappedComponent from './Component';\n\nimport { selector } from './selectors';\nimport { action } from './actions';\n\n// If the store is not able to be validated, this component will be rendered as altComponent.\nconst Loading = () =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e;\n\nclass Container extends Component {\n  state = {}\n  \n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cWrappedComponent\n          selector={selector}\n          action={action}\n          {/* v Optional v */}\n          altComponent={Loading}\n          validateStore={state =\u003e state.id !== undefined}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default Container;\n```\n\n## Contributing \nFeel free to open a PR contributing a feature addition, bugfix or even adding/improving documentation. PR's are always welcome! :)\n\n## Issues\nAs this project is still in Alpha, there is a very significant chance of bugs popping up. If you do run into something of the sort, please feel free to open an issue and it will be looked into ASAP.\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomarrell%2Fr2d2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomarrell%2Fr2d2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomarrell%2Fr2d2/lists"}