{"id":13437863,"url":"https://github.com/ryanflorence/async-props","last_synced_at":"2026-01-12T00:52:30.420Z","repository":{"id":45566385,"uuid":"46333348","full_name":"ryanflorence/async-props","owner":"ryanflorence","description":"Co-located data loading for React Router","archived":false,"fork":false,"pushed_at":"2017-01-31T20:38:34.000Z","size":71,"stargazers_count":566,"open_issues_count":17,"forks_count":48,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-05-11T11:20:23.208Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ryanflorence.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-17T08:29:40.000Z","updated_at":"2024-03-17T14:59:15.000Z","dependencies_parsed_at":"2022-09-14T00:00:35.296Z","dependency_job_id":null,"html_url":"https://github.com/ryanflorence/async-props","commit_stats":null,"previous_names":["rackt/async-props"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanflorence%2Fasync-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanflorence%2Fasync-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanflorence%2Fasync-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanflorence%2Fasync-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanflorence","download_url":"https://codeload.github.com/ryanflorence/async-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353745,"owners_count":20925329,"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-07-31T03:01:00.770Z","updated_at":"2026-01-12T00:52:30.347Z","avatar_url":"https://github.com/ryanflorence.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Code Design","JavaScript"],"sub_categories":["Uncategorized","Props from server"],"readme":"# AsyncProps for React Router\n\n[![npm package](https://img.shields.io/npm/v/async-props.svg?style=flat-square)](https://www.npmjs.org/package/async-props)\n[![#rackt on freenode](https://img.shields.io/badge/irc-rackt_on_freenode-61DAFB.svg?style=flat-square)](https://webchat.freenode.net/)\n\nCo-located data loading for React Router apps. Data is loaded before the new screen renders. It is designed to be both a useful solution for many apps, as well as a reference implementation for integrating data with React Router (stuff like redux, relay, falcor etc).\n\n## Docs \u0026 Help\n\n- [Changelog](/CHANGES.md)\n- [#react-router @ Reactiflux](https://discord.gg/0ZcbPKXt5bYaNQ46)\n- [Stack Overflow](http://stackoverflow.com/questions/tagged/react-router)\n\nFor questions and support, please visit [our channel on Reactiflux](https://discord.gg/0ZcbPKXt5bYaNQ46) or [Stack Overflow](http://stackoverflow.com/questions/tagged/react-router). The issue tracker is *exclusively* for bug reports and feature requests.\n\n## Installation\n\nUsing [npm](https://www.npmjs.com/):\n\n    $ npm install async-props\n\nThen with a module bundler like [webpack](https://webpack.github.io/), use as you would anything else:\n\n```js\n// using an ES6 transpiler, like babel\nimport AsyncProps from 'async-props'\n```\n\nThe UMD build is also available on [npmcdn](https://npmcdn.com):\n\n```html\n\u003cscript src=\"https://npmcdn.com/async-props/umd/AsyncProps.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can find the library on `window.AsyncProps`.\n\n## Notes\n\nThis is pre-release, it's pretty close though. If you are using it then you are\na contributor. Please add tests with all pull requests.\n\n## Usage\n\n```js\nimport { Router, Route } from 'react-router'\nimport AsyncProps from 'async-props'\nimport React from 'react'\nimport { render } from 'react-dom'\n\nclass App extends React.Component {\n\n  // 1. define a `loadProps` static method\n  static loadProps(params, cb) {\n    cb(null, {\n      tacos: [ 'Pollo', 'Carnitas' ]\n    })\n  }\n\n  render() {\n    // 2. access data as props :D\n    const tacos = this.props.tacos\n    return (\n      \u003cdiv\u003e\n        \u003cul\u003e\n          {tacos.map(taco =\u003e (\n            \u003cli\u003e{taco}\u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\n// 3. Render `Router` with AsyncProps middleware\nrender((\n  \u003cRouter render={(props) =\u003e \u003cAsyncProps {...props}/\u003e}\u003e\n    \u003cRoute path=\"/\" component={App}/\u003e\n  \u003c/Router\u003e\n), el)\n```\n\n### Server\n\n```js\nimport { renderToString } from 'react-dom/server'\nimport { match, RoutingContext } from 'react-router'\nimport AsyncProps, { loadPropsOnServer } from 'async-props'\n\napp.get('*', (req, res) =\u003e {\n  match({ routes, location: req.url }, (err, redirect, renderProps) =\u003e {\n\n    // 1. load the props\n    loadPropsOnServer(renderProps, (err, asyncProps, scriptTag) =\u003e {\n\n      // 2. use `AsyncProps` instead of `RoutingContext` and pass it\n      //    `renderProps` and `asyncProps`\n      const appHTML = renderToString(\n        \u003cAsyncProps {...renderProps} {...asyncProps} /\u003e\n      )\n\n      // 3. render the script tag into the server markup\n      const html = createPage(appHTML, scriptTag)\n      res.send(html)\n    })\n  })\n})\n\nfunction createPage(html, scriptTag) {\n  return `\n    \u003c!doctype html\u003e\n    \u003chtml\u003e\n      \u003c!-- etc. ---\u003e\n      \u003cbody\u003e\n        \u003cdiv id=\"app\"\u003e${html}\u003c/div\u003e\n\n        \u003c!-- its a string --\u003e\n        ${scriptTag}\n      \u003c/body\u003e\n    \u003c/html\u003e\n  `\n}\n```\n\n## API\n\nPlease refer to the example, as it exercises the entire API. Docs will\ncome eventually :)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanflorence%2Fasync-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanflorence%2Fasync-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanflorence%2Fasync-props/lists"}