{"id":22382545,"url":"https://github.com/jcoreio/react-router-drilldown","last_synced_at":"2025-07-31T03:31:57.545Z","repository":{"id":15042668,"uuid":"77476390","full_name":"jcoreio/react-router-drilldown","owner":"jcoreio","description":"provides drilldown-style horizontal slide transitions between index and child routes","archived":false,"fork":false,"pushed_at":"2024-04-10T02:40:39.000Z","size":4242,"stargazers_count":12,"open_issues_count":34,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T06:44:57.368Z","etag":null,"topics":["animation","drilldown","react","react-router","route","transition"],"latest_commit_sha":null,"homepage":"https://jcoreio.github.io/react-router-drilldown/","language":"TypeScript","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/jcoreio.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":"2016-12-27T18:55:53.000Z","updated_at":"2024-03-05T22:38:18.000Z","dependencies_parsed_at":"2024-11-15T02:52:41.490Z","dependency_job_id":"4ebd87ff-0bb8-4d2b-8679-d74a5ceefb89","html_url":"https://github.com/jcoreio/react-router-drilldown","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-router-drilldown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-router-drilldown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-router-drilldown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-router-drilldown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcoreio","download_url":"https://codeload.github.com/jcoreio/react-router-drilldown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228209939,"owners_count":17885595,"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":["animation","drilldown","react","react-router","route","transition"],"created_at":"2024-12-05T00:13:25.492Z","updated_at":"2024-12-05T00:13:26.216Z","avatar_url":"https://github.com/jcoreio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-router-drilldown\n\n[![CircleCI](https://circleci.com/gh/jcoreio/react-router-drilldown.svg?style=svg)](https://circleci.com/gh/jcoreio/react-router-drilldown)\n[![Coverage Status](https://codecov.io/gh/jcoreio/react-router-drilldown/branch/master/graph/badge.svg)](https://codecov.io/gh/jcoreio/react-router-drilldown)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![npm version](https://badge.fury.io/js/react-router-drilldown.svg)](https://badge.fury.io/js/react-router-drilldown)\n\nThis is a simple component that provides drilldown-style horizontal slide transitions between index and child routes.\nIt is based upon the `\u003cSwitch\u003e` component from `react-router` v4 and uses `react-view-slider` internally.\n\nFor `react-router` v2 or v3, see the [legacy project](https://github.com/jcoreio/react-router-3-drilldown).\n\n[Live Demo](http://jcoreio.github.io/react-router-drilldown/)\n\n## Usage\n\n```\nnpm install --save react-router react-router-dom react-router-drilldown\n```\n\nCreate a `\u003cDrilldown\u003e` element with child `\u003cRoute\u003e`s exactly like you would for a `\u003cSwitch\u003e`.\nBy default the first child `\u003cRoute\u003e` is at the left, and subsequent child routes will slide in from the right.\nHowever, you also customize the order by giving an integer `key` to each child route.\n\n```js\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { BrowserRouter as Router, Route, Link } from 'react-router-dom'\nimport Drilldown from 'react-router-drilldown'\n\nconst Home = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eHome\u003c/h1\u003e\n    \u003cp\u003e\n      \u003cLink to=\"/users\"\u003eUsers\u003c/Link\u003e\n    \u003c/p\u003e\n    \u003cp\u003e\n      \u003cLink to=\"/users/andy\"\u003eAndy\u003c/Link\u003e\n    \u003c/p\u003e\n  \u003c/div\u003e\n)\n\nconst Users = ({ match }) =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eUsers\u003c/h1\u003e\n    \u003cLink to={`${match.url}/andy`}\u003eAndy\u003c/Link\u003e\n  \u003c/div\u003e\n)\n\nconst Andy = () =\u003e \u003ch1\u003eAndy\u003c/h1\u003e\n\nrender(\n  \u003cRouter\u003e\n    \u003cDrilldown\u003e\n      \u003cRoute exact path=\"/\" component={Home} /\u003e\n      \u003cRoute exact path=\"/users\" component={Users} /\u003e\n      \u003cRoute path=\"/users/andy\" component={Andy} /\u003e\n    \u003c/Drilldown\u003e\n  \u003c/Router\u003e,\n  document.getElementById('root')\n)\n```\n\nNote: if you transition directly from `/` to `/users/andy` before ever visiting `/users`, the `/users` view will not\nshow in the middle of the animated transition. However, once you have visited `/users`, it will show between the other\ntwo views when transitioning between them.\n\n## Drilldowns can be nested\n\nInstead of the flat route configuration shown above, you also use a separate drilldown at each level:\n\n```js\nconst UsersRoute = ({ match }) =\u003e (\n  \u003cDrilldown\u003e\n    \u003cRoute exact path={match.path} component={Users} /\u003e\n    \u003cRoute path={`${match.url}/andy`} component={Andy} /\u003e\n  \u003c/Drilldown\u003e\n)\n\nrender(\n  \u003cRouter\u003e\n    \u003cDrilldown\u003e\n      \u003cRoute exact path=\"/\" component={Home} /\u003e\n      \u003cRoute path=\"/users\" component={UsersRoute} /\u003e\n    \u003c/Drilldown\u003e\n  \u003c/Router\u003e,\n  document.getElementById('root')\n)\n```\n\nUnlike the flat example above, you will not see the `/users` view fly by in the middle when transitioning directly\nfrom `/` to `/users/andy`.\n\n## Props\n\n### `animateHeight: boolean` (default: `true`)\n\nIf truthy, will animate its height to match the height of the page at `activePage`.\n\n### `keepViewsMounted: boolean` (default: `false`)\n\nIf truthy, will keep all routes that have rendered before mounted.\n\n### `keepPrecedingViewsMounted: boolean` (default: `false`)\n\nIf truthy, will keep routes preceding the active route mounted (but not routes following the active route).\nThe order is determined by the integer `key` properties on your `\u003cRoute\u003e`s.\n\n### `transitionDuration: number` (default: `500`)\n\nThe duration of the transition between pages.\n\n### `transitionTimingFunction: string` (default: `'ease'`)\n\nThe timing function for the transition between pages.\n\n### `prefixer: Prefixer`\n\nIf given, overrides the `inline-style-prefixer` used to autoprefix inline styles.\n\n### `fillParent: boolean` (default: `false`)\n\nIf truthy, `Drilldown` will use absolute positioning on itself and its pages to fill its parent element.\n\n### `className: string`\n\nAny extra class names to add to the root element.\n\n### `style: Object`\n\nExtra inline styles to add to the root element.\n\n### `viewportClassName: string`\n\nAny extra class names to add to the inner \"viewport\" element.\n\n### `viewportStyle: Object`\n\nExtra inline styles to add to the inner \"viewport\" element.\n\n### `viewStyle: Object`\n\nExtra inline styles to add to the view wrapper elements.\n\n##### `innerViewWrapperStyle: Object`\n\nExtra inline styles to add to the inner div between the `viewStyle` div and your\nview content element. (The inner div was added to ensure perfect height\nanimation.)\n\n### `location: Location` (default: accessed from `withRouter`)\n\nIf given, this location is used instead of the one from `withRouter`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-router-drilldown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcoreio%2Freact-router-drilldown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-router-drilldown/lists"}