{"id":22351105,"url":"https://github.com/koala-interactive/react-anchor-navigation","last_synced_at":"2025-07-30T07:31:40.760Z","repository":{"id":55662761,"uuid":"236526683","full_name":"koala-interactive/react-anchor-navigation","owner":"koala-interactive","description":"React lightweight library for anchor scrolling and navigation tied to URL hash","archived":false,"fork":false,"pushed_at":"2023-06-02T10:59:12.000Z","size":84,"stargazers_count":11,"open_issues_count":1,"forks_count":2,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-11-29T23:35:09.061Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/koala-interactive.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":"2020-01-27T15:46:58.000Z","updated_at":"2024-01-04T09:21:58.000Z","dependencies_parsed_at":"2024-06-19T16:02:31.902Z","dependency_job_id":null,"html_url":"https://github.com/koala-interactive/react-anchor-navigation","commit_stats":{"total_commits":41,"total_committers":3,"mean_commits":"13.666666666666666","dds":0.6341463414634146,"last_synced_commit":"2e3860183213d72d0de98d767f43c34e14fd3940"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koala-interactive%2Freact-anchor-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koala-interactive%2Freact-anchor-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koala-interactive%2Freact-anchor-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koala-interactive%2Freact-anchor-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koala-interactive","download_url":"https://codeload.github.com/koala-interactive/react-anchor-navigation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228106545,"owners_count":17870437,"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-12-04T12:13:02.798Z","updated_at":"2024-12-04T12:13:03.825Z","avatar_url":"https://github.com/koala-interactive.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Logo](https://koala-interactive.com/logo.e927957b.svg)\n\n# react-anchor-navigation\n\n![npm type definitions](https://img.shields.io/npm/types/react-anchor-navigation)\n\n[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)\n\n![lint](https://github.com/koala-interactive/react-anchor-navigation/workflows/lint/badge.svg?branch=master)\n\n![e2e](https://github.com/koala-interactive/react-anchor-navigation/workflows/e2e/badge.svg?branch=master)\n\n\n## Description\n\nThis library exports multiple helpers designed to make your anchor navigation works seamlessly. Check the [examples](./examples/custom-section.html)\n\n## πŸ“– table of content\n\n- [Installation](#πŸš€-installation)\n- [How to use](#πŸ–₯️-how-to-use)\n- [How to test](#⏳-how-to-test)\n- [How to contribute](#🀝-how-to-contribute)\n- [List of our other package](#πŸ“¦-list-of-our-other-package)\n- [Join us](#β›΅-join-us)\n- [License](#license)\n\n## πŸš€ Installation\n\nThis project uses react hooks and is therefore reliant on react version \u003e=16.8.6\n\nTo install and use react-anchor-navigation, add it to your package.json and modules with the following command line :\n\n```ts\nnpm install --save react-anchor-navigation\n```\n\nOR\n\n```ts\nyarn add react-anchor-navigation\n```\n\n## πŸ–₯️ How to use\n\n![Enregistrement de l’écran 2023-06-01 aΜ€ 12 12 50](https://github.com/koala-interactive/react-anchor-navigation/assets/38717285/5f9c9202-cadb-4236-bf3e-56092baa30aa)\n\n```tsx\nimport {\n AnchorContext,\n AnchorLink,\n AnchorProvider,\n AnchorSection,\n} from \"react-anchor-navigation\";\n```\n\n#### AnchorProvider\n\nAnchorProvider is our top level contextProvider. Wrap it around your topmost component for your view :\n\n```tsx\n\u003cAnchorProvider\u003e\n \u003cYourView /\u003e\n\u003c/AnchorProvider\u003e\n```\n\n| Key | Type | Description |\n| ----------- | :-----------------: | ---------------------------------------------------------------------------------------------------------------: |\n| offset | `number` | The offset amount of pixels from the top, usefull when handling fixed header or sticky navigation (default: `0`) |\n| getScroller | `() =\u003e HTMLElement` | Function to returns the scrollable element (default: `body`) |\n\nIt will provide the AnchorContext to all children.\n\n#### AnchorContext\n\nAnchorContext is the context you can yield with the new `useContext` hook or with old-fashioned Context.consumer.\n\n```ts\nconst { hash, sections } = useContext(AnchorContext);\n```\n\nHere is its typing :\n\n| Key | Type | Description |\n| ----------------- | :---------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------: |\n| sections | `HTMLElement[]` | List of the registered sections elements that we watch, in our codebase it is AnchorSection |\n| hash | `string` | The registered hash corresponding to our current scroll position |\n| registerSection | `(element: HTMLElement) =\u003e void` | Function to add a Section to our sections list, our scrollEvent listener will then update the hash if the section is scrolled to |\n| unregisterSection | `(element: HTMLElement) =\u003e void` | Function to remove a Section to our sections list, our scrollEvent listener will then stop checking this section |\n| setHash | `(hash: string, withScroll?: boolean) =\u003e void;` | Setter function from the internal useHash hooks, use it to programmatically change the current hash |\n| offset | `number` | The offset amount of pixels from the top, usefull when handling fixed header or sticky navigation (default: `0`) |\n\n#### AnchorSection\n\nAnchorSection is our most used components, it defines the scroll position you will arrive to on navigation/reloading\n\n```ts\n\u003cAnchorSection className=\"dBlock anchor\" id=\"definitions\" /\u003e\n```\n\nIts props are the usual HTMLElement's props (`className, data-*`), along with an id used for recognizing the update the current hash on scroll.\n\n```ts\ninterface TProps extends React.HTMLAttributes\u003cHTMLElement\u003e {\n id: string;\n}\n```\n\nInternally it creates a `\u003cb/\u003e` tag to which we scroll to on reload and detect if we scrolled past it.\n\n```tsx\n\u003c\u003e\n \u003cb {...attributes} /\u003e\n {...children}\n\u003c/\u003e\n```\n\n#### AnchorLink\n\nAnchorLink is a component made to have an activeClassname if its `href` is the current hash\n\n```ts\ninterface TProps extends React.AnchorHTMLAttributes\u003cHTMLAnchorElement\u003e {\n children: React.ReactNode[] | React.ReactNode;\n activeClassName?: string;\n}\n```\n\n```tsx\n\u003cAnchorLink className=\"dTable w100 pad15\" href=\"#definitions\" activeClassName=\"blue\"\u003e\n```\n\n## ⏳ How to test\n\nreact-anchor-navigation can be tested with the end-to-end testing library Cypress.\n\nTo run the tests, run `yarn cypress` and select the test specs to run in the Cypress window.\n\nLearn more about writing your own Cypress tests with the [Cypress documentation](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Add-a-test-file).\n\n## 🀝 How to contribute\n\n- fork the project\n- install dependencies (yarn)\n- create a branch from main/master like that\n\n $ contribution/fix/your-github-identity\n\n OR\n\n $ contribution/improvment/your-github-identity\n\n- push several (if needed) clear commits\n- add tests following the way of the other ones have been wrote\n- make sure that all test runs\n- push your code\n\n## πŸ“¦ List of our other package\n\n- [is-emoji-supported](https://www.npmjs.com/package/is-emoji-supported#fallback-to-images)\n- [frenchkiss](https://www.npmjs.com/package/frenchkiss)\n- [wowza-webrtc-player](https://www.npmjs.com/package/wowza-webrtc-player)\n- [react-rich-mentions](https://www.npmjs.com/package/react-rich-mentions)\n- [react-anchor-navigation](https://www.npmjs.com/package/react-anchor-navigation)\n\n## β›΅ Join us\n\nMay you want to share more than a pull request\ncheck our [jobs opportunity](https://www.linkedin.com/company/koala-interactive/jobs/)\n\n## License\n\nCopyright (c) 2023 [Koala-Interactive](https://koala-interactive.com/)\n\nThis project is [MIT](LICENSE.md) licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoala-interactive%2Freact-anchor-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoala-interactive%2Freact-anchor-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoala-interactive%2Freact-anchor-navigation/lists"}