React library to provide a declarative scroll to between sections
When you think about implementing a scrollTo
functionality in a website the first thing it will your mind will be jQuery, using the following line of code:
$('#target').scroll();
I won't deny that actually works, but the problem comes when you start working with frameworks based on component, like React.
Manage the navigation to another section and which section can be hard task without a state management library.
This library will help you to avoid thinking all the possible edges cases and focus on the final result, which is just provide an easy navigation inside your app.
Just React! Using the following API:
<Consumer />
and <Provider />
.createRef
APIuseScrollSection
and useScrollSections
to interact with the registered sections.# npm
> npm install react-scroll-section
# yarn
> yarn add react-scroll-section
The library provides the following components:
ScrollingProvider
: responsible to link Section
and SectionLink
and know which Section
is selected.Section
: renders a <section />
tag that receives an ID and register itself in ScrollingProvider
.useScrollSection
: React Hook given the id
of the section returns if the section is selected
and a callback to scroll to it.useScrollSection
: returns an array of all the sections
with id
, selected
and scrollTo
.SectionLink
(Static Menu)import React from 'react';
import {
ScrollingProvider,
useScrollSection,
Section,
} from 'react-scroll-section';
const StaticMenu = () => {
const homeSection = useScrollSection('home');
const aboutSection = useScrollSection('about');
return (
<ul>
<li onClick={homeSection.onClick} selected={homeSection.selected}>
Home
</li>
<li onClick={aboutSection.onClick} selected={aboutSection.selected}>
About
</li>
</ul>
);
};
const App = () => (
<ScrollingProvider>
<StaticMenu />
<Section id="home">MY HOME</Section>
<Section id="about">ABOUT ME</Section>
</ScrollingProvider>
);
SectionLinks
(Dynamic Menu)import React from 'react';
import {
ScrollingProvider,
useScrollSections,
Section,
} from 'react-scroll-section';
export const DynamicMenu = () => {
const sections = useScrollSections();
return (
<ul>
{sections.map(({ id, onClick, selected }) => (
<li key={id} onClick={onClick} selected={selected}>
{id.toUpperCase()}
</li>
))}
</ul>
);
};
const App = () => (
<ScrollingProvider>
<DynamicMenu />
<Section id="home">Home section</Section>
<Section id="about">About section</Section>
</ScrollingProvider>
);
Property | Type | Required | Default | Description |
---|---|---|---|---|
debounceDelay |
number |
false | 50 | time to wait until the calculation of the current section |
scrollBehavior |
string |
false | "smooth" | scrolling style |
children |
ReactNode |
false | null | React component |
offset |
number |
false | null | Vertical offset the modifies the final scrolling position |
Property | Type | Required | Default | Description |
---|---|---|---|---|
children |
ReactNode |
false | null | Section content |
id |
string |
true | - | Section ID |
I'm always open for suggestions and improvements, so don't hesitate to open an Issue or new Pull Request.
This project is using Yarn workspace, therefore check that you have Yarn as your package manager.
# Check if you have you Yarn install
> yarn -v
1.22.18
# Install dependencies
> yarn
# Builds library
> yarn build
# Starts demo app locally
> yarn start
# Run E2E tests
> yarn test
# Build library + demo app
> yarn build:demo
MIT.