React lightweight library for anchor scrolling and navigation tied to URL hash.
npm install react-anchor-navigation!Logo

!lint
!e2e
This library exports multiple helpers designed to make your anchor navigation works seamlessly. Check the examples
- Installation
- How to use
- How to test
- How to contribute
- List of our other package
- Join us
- License
This project uses react hooks and is therefore reliant on react version >=16.8.6
To install and use react-anchor-navigation, add it to your package.json and modules with the following command line :
``ts`
npm install --save react-anchor-navigation
OR
`ts`
yarn add react-anchor-navigation
!Enregistrement de lβeΜcran 2023-06-01 aΜ 12 12 50
`tsx`
import {
AnchorContext,
AnchorLink,
AnchorProvider,
AnchorSection,
} from "react-anchor-navigation";
#### AnchorProvider
AnchorProvider is our top level contextProvider. Wrap it around your topmost component for your view :
`tsx`
| Key | Type | Description |
| ----------- | :-----------------: | ---------------------------------------------------------------------------------------------------------------: |
| offset | number | The offset amount of pixels from the top, usefull when handling fixed header or sticky navigation (default: 0) |() => HTMLElement
| getScroller | | Function to returns the scrollable element (default: body) |
It will provide the AnchorContext to all children.
#### AnchorContext
AnchorContext is the context you can yield with the new useContext hook or with old-fashioned Context.consumer.
`ts`
const { hash, sections } = useContext(AnchorContext);
Here is its typing :
| Key | Type | Description |
| ----------------- | :---------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------: |
| sections | HTMLElement[] | List of the registered sections elements that we watch, in our codebase it is AnchorSection |string
| hash | | The registered hash corresponding to our current scroll position |(element: HTMLElement) => void
| registerSection | | Function to add a Section to our sections list, our scrollEvent listener will then update the hash if the section is scrolled to |(element: HTMLElement) => void
| unregisterSection | | Function to remove a Section to our sections list, our scrollEvent listener will then stop checking this section |(hash: string, withScroll?: boolean) => void;
| setHash | | Setter function from the internal useHash hooks, use it to programmatically change the current hash |number
| offset | | The offset amount of pixels from the top, usefull when handling fixed header or sticky navigation (default: 0) |
#### AnchorSection
AnchorSection is our most used components, it defines the scroll position you will arrive to on navigation/reloading
`ts`
Its props are the usual HTMLElement's props (className, data-*), along with an id used for recognizing the update the current hash on scroll.
`ts`
interface TProps extends React.HTMLAttributes
id: string;
}
Internally it creates a tag to which we scroll to on reload and detect if we scrolled past it.
`tsx`
<>
{...children}
>
#### AnchorLink
AnchorLink is a component made to have an activeClassname if its href is the current hash
`ts`
interface TProps extends React.AnchorHTMLAttributes
children: React.ReactNode[] | React.ReactNode;
activeClassName?: string;
}
`tsx`
react-anchor-navigation can be tested with the end-to-end testing library Cypress.
To run the tests, run yarn cypress` and select the test specs to run in the Cypress window.
Learn more about writing your own Cypress tests with the Cypress documentation.
- fork the project
- install dependencies (yarn)
- create a branch from main/master like that
$ contribution/fix/your-github-identity
OR
$ contribution/improvment/your-github-identity
- push several (if needed) clear commits
- add tests following the way of the other ones have been wrote
- make sure that all test runs
- push your code
- is-emoji-supported
- frenchkiss
- wowza-webrtc-player
- react-rich-mentions
- react-anchor-navigation
May you want to share more than a pull request
check our jobs opportunity
Copyright (c) 2023 Koala-Interactive
This project is MIT licensed.