{"id":14384830,"url":"https://github.com/pshrmn/rrc","last_synced_at":"2025-04-14T03:34:02.914Z","repository":{"id":83917662,"uuid":"76434400","full_name":"pshrmn/rrc","owner":"pshrmn","description":"React Router v4 helper components","archived":false,"fork":false,"pushed_at":"2017-04-12T18:30:03.000Z","size":72,"stargazers_count":113,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-27T17:35:57.166Z","etag":null,"topics":["react","react-router"],"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/pshrmn.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-14T07:12:07.000Z","updated_at":"2023-09-22T18:19:17.000Z","dependencies_parsed_at":"2023-06-09T22:00:36.000Z","dependency_job_id":null,"html_url":"https://github.com/pshrmn/rrc","commit_stats":{"total_commits":76,"total_committers":1,"mean_commits":76.0,"dds":0.0,"last_synced_commit":"b6d903dc97043f0503f9eef934d40d778fcf17a6"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshrmn%2Frrc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshrmn%2Frrc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshrmn%2Frrc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshrmn%2Frrc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pshrmn","download_url":"https://codeload.github.com/pshrmn/rrc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248364143,"owners_count":21091524,"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":["react","react-router"],"created_at":"2024-08-28T18:01:42.478Z","updated_at":"2025-04-14T03:34:02.879Z","avatar_url":"https://github.com/pshrmn.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## rrc = react router components\n\n[![Travis][build-badge]][build]\n\n[build-badge]: https://img.shields.io/travis/pshrmn/rrc/master.svg?style=flat-square\n[build]: https://travis-ci.org/pshrmn/rrc\n\nThis module contains a number of components that can be used in conjuction with [React Router v4](https://github.com/ReactTraining/react-router/tree/master). They are a somewhat random assortment of solutions to situations that I have either personally needed a component for or have seen others need a component for.\n\n### Installation\n\n```\nnpm install --save rrc\n```\n\n#### UMD\n\nYou can also use the UMD version of `rrc`. This is useful if you are putting together a code snippet.\n\n```html\n\u003cscript src=\"https://unpkg.com/rrc@0.10.0/umd/rrc.min.js\"\u003e\u003c/script\u003e\n```\n\n**Note:** The UMD builds are slightly bloated because they have to include React Router's `\u003cRoute\u003e` component and `matchPath` function. This is because if you use the UMD build of `react-router-dom` instead of `react-router`, the `ReactRouter` global will not exist and `rrc`'s imports will fail. The bloat is less than the extra data required to download the `react-router` build and this approach requires one less `\u003cscript\u003e` tag.\n\n### Components\n\nRead about the various components that are provided in the [docs](docs/README.md)\n\nThese include:\n\n#### `\u003cConfigSwitch\u003e` and `wrapSwitch` \n\nThese both provide an alternative approach to React Router's `\u003cSwitch\u003e` component. Intead of passing child elements to the `\u003cSwitch\u003e`, both `\u003cConfigSwitch\u003e` and the component returned by the `wrapSwitch` HOC take an array of route objects via the `routes` prop.\n\n```js\n\u003cConfigSwitch routes={[\n  { path: '/', exact: true, component: Home },\n  { path: '/about' component: About }\n]}/\u003e\n```\n\n`wrapSwitch` in particular is useful for animations. It allows you to specify a component that will be used to wrap the matched route, providing better support for nested animations than is available with `\u003cSwitch\u003e`\n\n```js\nimport { CSSTransitionGroup } from 'react-transition-group'\n\nconst CSSSwitch = wrapSwitch(CSSTransitionGroup)\n\nconst App = () =\u003e (\n  \u003cCSSSwitch\n    transitionName='slide'\n    component='div'\n    routes={[\n      { path: '/', exact: true, component: Home },\n      { path: '/about' component: About }\n    ]}\n  /\u003e\n)\n```\n\n#### `\u003cStatus\u003e`\n\nIf you are doing server side rendering, the `\u003cStatus\u003e` component offers an easy way to \"render\" a status. For example, if you have a \"404\" component that renders when no routes match, you can include a `\u003cStatus\u003e` element inside of its render method so that your server can send the correct status code with the response.\n\n```js\nconst NoMatch = () =\u003e (\n  \u003cdiv\u003e\n    \u003cStatus code='404' /\u003e\n    \u003ch1\u003e404\u003c/h1\u003e\n    \u003cp\u003eThe page you were looking for was not found\u003c/p\u003e\n  \u003c/div\u003e\n)\n```\n\nThe `\u003cStatus\u003e` component will set a property on the `context` object that you pass to the `\u003cStaticRouter\u003e`, so all that you have to do is check the context object's `status` property.\n\n```js\nconst context = {}\nconst markup = renderToString(\n  \u003cStaticRouter context={context}\u003e\n    \u003cApp /\u003e\n  \u003c/StaticRouter\u003e\n)\n\nif (context.status === '404') {\n  // ...\n}\n```\n\n#### `whenActive`\n\nThe `whenActive` higher-order component creates `\u003cNavLink\u003e`-like components. While a `\u003cNavLink\u003e` can only create `\u003ca\u003e`s, the component returned by `whenActive` can render anything that you'd like.\n\n```js\n// a button that can navigate\nconst Button = ({ to, ...rest}, { router }) =\u003e (\n  \u003cbutton\n    type='button'\n    onClick={(e) =\u003e {\n      e.preventDefault()\n      router.history.push(to)\n    }}\n    {...rest}\n  /\u003e\n)\n\nconst ActiveButton = whenActive({ className: 'i-am-active' })(Button)\n\n// usage\nconst Controls = () =\u003e (\n  \u003cdiv\u003e\n    \u003cActiveButton to='/'\u003eHome\u003c/ActiveButton\u003e\n    \u003cActiveButton to='/form'\u003eForm\u003c/ActiveButton\u003e\n  \u003c/div\u003e\n)\n```\n\nThis can also be used in place of the `\u003cNavLink\u003e` so that you don't have to specify the same \"active\" props for every location-aware link.\n\n```js\n// with NavLink\nconst Links = () =\u003e (\n  \u003cdiv\u003e\n    \u003cNavLink to='/one' activeClassName='the-active-class'\u003eOne\u003c/NavLink\u003e\n    \u003cNavLink to='/two' activeClassName='the-active-class'\u003eTwo\u003c/NavLink\u003e\n    \u003cNavLink to='/three' activeClassName='the-active-class'\u003eThree\u003c/NavLink\u003e\n  \u003c/div\u003e\n)\n\n// with whenActive\nconst ActiveLink = whenActive({ className: 'the-active-class' })(Link)\nconst Links = () =\u003e (\n  \u003cdiv\u003e\n    \u003cActiveLink to='/one'\u003eOne\u003c/ActiveLink\u003e\n    \u003cActiveLink to='/two'\u003eTwo\u003c/ActiveLink\u003e\n    \u003cActiveLink to='/three'\u003eThree\u003c/ActiveLink\u003e\n  \u003c/div\u003e\n)\n```\n\n### Related Projects:\n\n* [`qhistory`](https://github.com/pshrmn/qhistory) - Add query object support to location objects\n* [`react-router-test-context`](https://github.com/pshrmn/react-router-test-context) - Simulate the `context.router` object. This can be useful if you are doing shallow testing of a component that needs to access React Router's context variables. Typically, though, you should just render your component inside of a `\u003cMemoryRouter\u003e`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpshrmn%2Frrc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpshrmn%2Frrc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpshrmn%2Frrc/lists"}