{"id":14977658,"url":"https://github.com/rafgraph/react-router-hash-link","last_synced_at":"2025-05-15T07:07:27.025Z","repository":{"id":46262943,"uuid":"58664385","full_name":"rafgraph/react-router-hash-link","owner":"rafgraph","description":"Hash link scroll functionality for React Router","archived":false,"fork":false,"pushed_at":"2021-10-07T16:18:48.000Z","size":4682,"stargazers_count":737,"open_issues_count":20,"forks_count":60,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-22T08:48:01.523Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-router-hash-link.rafgraph.dev","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/rafgraph.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-05-12T17:56:23.000Z","updated_at":"2025-04-22T04:06:38.000Z","dependencies_parsed_at":"2022-09-26T21:30:30.037Z","dependency_job_id":null,"html_url":"https://github.com/rafgraph/react-router-hash-link","commit_stats":null,"previous_names":["rafrex/react-router-hash-link"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Freact-router-hash-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Freact-router-hash-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Freact-router-hash-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Freact-router-hash-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafgraph","download_url":"https://codeload.github.com/rafgraph/react-router-hash-link/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250408300,"owners_count":21425673,"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-09-24T13:56:05.482Z","updated_at":"2025-05-15T07:07:22.011Z","avatar_url":"https://github.com/rafgraph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Router Hash Link\n\n[![npm](https://img.shields.io/npm/dm/react-router-hash-link?label=npm)](https://www.npmjs.com/package/react-router-hash-link) [![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-router-hash-link?color=purple)](https://bundlephobia.com/result?p=react-router-hash-link)\n\nThis is a solution to [React Router's issue of not scrolling to `#hash-fragments`](https://github.com/reactjs/react-router/issues/394#issuecomment-220221604) when using the `\u003cLink\u003e` component to navigate.\n\nWhen you click on a link created with `react-router-hash-link` it will scroll to the element on the page with the `id` that matches the `#hash-fragment` in the link. This will also work for elements that are created after an asynchronous data load. Note that you must use React Router's `BrowserRouter` for this to work.\n\n---\n\n### [Live demo app for React Router Hash Link](https://react-router-hash-link.rafgraph.dev)\n\nCode is in the [`/demo`](/demo) folder, or open the [demo in CodeSandbox](https://githubbox.com/rafgraph/react-router-hash-link/tree/main/demo)\n\n---\n\n## Basics\n\n```shell\nnpm install --save react-router-hash-link\n```\n\n`react-router-dom` is a peer dependency.\n\n---\n\n### `\u003cHashLink\u003e`\n\n```js\nimport { HashLink } from 'react-router-hash-link';\n\n...\n\n// use it just like a RRv4/5 \u003cLink\u003e\n// the `to` prop can be a string or an object, see RRv4/5 api for details\n\u003cHashLink to=\"/some/path#with-hash-fragment\"\u003eLink to Hash Fragment\u003c/HashLink\u003e\n```\n\n---\n\n### `\u003cNavHashLink\u003e`\n\n```js\nimport { NavHashLink } from 'react-router-hash-link';\n\n...\n\n// use it just like a RRv4/5 \u003cNavLink\u003e (see RRv4/5 api for details)\n// it will be active only if both the path and hash fragment match\n\u003cNavHashLink\n  to=\"/some/path#with-hash-fragment\"\n  activeClassName=\"selected\"\n  activeStyle={{ color: 'red' }}\n  // etc...\n\u003eLink to Hash Fragment\u003c/NavHashLink\u003e\n```\n\n---\n\n## Scrolling API\n\n### `smooth: boolean`\n\n- Smooth scroll to the element\n- React Router Hash Link uses the native Element method `element.scrollIntoView()` for scrolling, and when the `smooth` prop is present it will call it with the smooth option, `element.scrollIntoView({ behavior: 'smooth' })`\n- Note that not all browsers have implemented options for `scrollIntoView` - see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) and [Can I Use](https://caniuse.com/#feat=scrollintoview) - there is also a browser [polyfill for smooth scrolling](https://github.com/iamdustan/smoothscroll) which you can install separately so `smooth` will work in all browsers\n\n```js\nimport { HashLink } from 'react-router-hash-link';\n\n...\n\n\u003cHashLink smooth to=\"/path#hash\"\u003e\n  Link to Hash Fragment\n\u003c/HashLink\u003e;\n```\n\n---\n\n### `scroll: function`\n\n- Custom scroll function called with the element to scroll to, e.g. `const myScrollFn = element =\u003e {...}`\n- This allows you to do things like scroll with offset, use a specific smooth scrolling library, or pass in your own options to `scrollIntoView`\n\n```js\nimport { HashLink } from 'react-router-hash-link';\n\n...\n\n\u003cHashLink\n  to=\"/path#hash\"\n  scroll={(el) =\u003e el.scrollIntoView({ behavior: 'auto', block: 'end' })}\n\u003e\n  Link to Hash Fragment\n\u003c/HashLink\u003e;\n```\n\n---\n\n### Scroll to top of page\n\n- To scroll to the top of the page set the hash fragment to `#` (empty) or `#top`\n- This is inline with the [HTML spec](https://html.spec.whatwg.org/multipage/browsing-the-web.html#target-element), also see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Linking_to_an_element_on_the_same_page)\n\n```js\nimport { HashLink } from 'react-router-hash-link';\n\n...\n\n\u003cHashLink to=\"/path#top\"\u003eLink to Top of Page\u003c/HashLink\u003e\n// or\n\u003cHashLink to=\"#top\"\u003eLink to Top of Page\u003c/HashLink\u003e\n```\n\n---\n\n### Scroll with offset\n\n- To scroll with offset use a custom scroll function, one way of doing this can be found [here](https://github.com/rafgraph/react-router-hash-link/issues/25#issuecomment-536688104)\n\n---\n\n### `elementId: string`\n\n- Scroll to the element with matching id\n- Used instead of providing a hash fragment as part of the `to` prop, if both are present then the `elementId` will override the `to` prop's hash fragment\n- Note that it is generally recommended to use the `to` prop's hash fragment instead of the `elementId`\n\n---\n\n## Custom `Link`\n\nThe exported components are wrapped versions of the `Link` and `NavLink` exports of react-router-dom. In some cases you may need to provide a custom `Link` implementation.\n\nFor example, the gatsby static site generator requires you to use its implementation of `Link`. You can wrap it with the `genericHashLink` function of this package.\n\n```jsx\nimport { genericHashLink } from 'react-router-hash-link';\nimport GatsbyLink from 'gatsby-link';\n\nconst MyHashLink = genericHashLink(GatsbyLink);\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    The default wont work for you?\n    \u003cMyHashLink to=\"/faq#how-to-use-custom-link\"\u003eNo problem!\u003c/MyHashLink\u003e\n  \u003c/div\u003e\n);\n```\n\n---\n\n## Focus Management\n\n`react-router-hash-link` attempts to recreate the native browser focusing behavior as closely as possible.\n\nThe browser native behavior when clicking a hash link is:\n\n- If the target element is not focusable, then focus is _moved_ to the target element, but the target element is not focused.\n- If the target element is focusable (interactive elements and elements with a `tabindex`), then the target element is focused.\n\nTo recreate this `react-router-hash-link` does the following:\n\n- For non-focusable elements, it calls `element.focus()` followed by `element.blur()` (using a temporary `tabindex` to ensure that the element can be focused programmatically) so that focus _moves_ to the target element but does not remain on it or trigger any style changes.\n- For focusable elements, it calls `element.focus()` and leaves focus on the target element.\n\nNote that you may find it useful to leave focus on non-interactive elements (by adding a `tabindex` of `-1`) to augment the navigation action with a visual focus indicator.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafgraph%2Freact-router-hash-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafgraph%2Freact-router-hash-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafgraph%2Freact-router-hash-link/lists"}