react-sections-scroller
v1.0.2
Published
Simple React library for smooth scrolling to sections
Downloads
23
Maintainers
Readme
react-sections-scroller
A simple & Fast & lightweight React library works on .js and .ts files, build with TypeScript for creating a smooth scrolling experience to sections on the same webpage from a navigation bar. (keep it simple)
Installation
$yarn add react-sections-scroller
or
$npm install react-sections-scroller
Importing
import { Section, SectionLink } from 'react-sections-scroller';
Basic usage
import { Section, SectionLink } from 'react-sections-scroller';
// The SectionLink component redirect to the Section
<SectionLink to="about" className="">
About
</SectionLink>
// The Section component defines a scrollable section
<Section id="about" className="">
<h2>This is About section</h2>
</Section>
// that's why both props are required... "to" and "id"
// className is optional but recommended!
🛑🔥 Styling SectionLink auto generate:
so link will change into color:🟥red by default without any style in your project, can be changed using
activeColor
inactiveColor
<SectionLink to="section1" activeColor='active' inactiveColor='inactive'>Section 1</SectionLink>
then in your style.css create:
.active{
color:blue;
}
// also optional
.inactive{
color:black;
}
🛑🔥 TailWind Styling also available SectionLink can be change easly using activeColor, inactiveColor
<SectionLink to="section1" activeColor='text-black' inactiveColor='text-white'>Section 1</SectionLink>
Best Practice
Full Example of only 2 steps
1- create Navbar component add this code
⚠ Hint: feel free to use component js, jsx, ts,tsx
import React from 'react';
import { SectionLink } from 'react-sections-scroller';
// The SectionLink component redirect to the Section
export default function Nav() {
return (
<nav>
<SectionLink to="aboutSection">About</SectionLink>
<SectionLink to="contactSection">Contact</SectionLink>
<SectionLink to="servicesSection">Services</SectionLink>
</nav>
)
}
2- create AboutSection component add this code
⚠ Hint: About component suppose to be a section in the same page, it's not routing to any other page
import React from 'react'
import { Section } from 'react-sections-scroller'
/ The Section component defines a scrollable section
export default function AboutSection() {
return (
<div>
<Section id="aboutSection" className="">
<h2>I'm about section</h2>
</Section>
</div>
)
}
sample of app component:
import React from "react";
import AboutSection from "./AboutSection";
import "./App.css";
import Nav from "./Nav";
function App() {
return (
<div>
<Nav />
<AboutSection />
</div>
);
}
export default App;
About
react-sections-scroller is a lightweight and easy-to-use React library designed to enhance user experience by enabling smooth scrolling functionality between sections on a webpage. It provides a seamless integration with navigation bars, allowing users to effortlessly navigate to different sections on the page.
With react-sections-scroller, you can easily implement a smooth scroll behavior without the need for complex configuration. Simply include the library in your project and start creating a more interactive and engaging user experience.
This library is suitable for a wide range of web applications, including personal websites, portfolios, blogs, and more. It offers a straightforward solution for adding a polished touch to your website's navigation and enhancing overall usability.
Features
✅ Smooth scrolling behavior
✅ Seamless integration with navigation bars
✅ Lightweight and easy to implement
✅ Enhances user experience and navigation
✅ Suitable for various web applications
Usage
To use react-sections-scroller in your React application, simply import the necessary components (only 2 for now) and configure the desired settings to enable smooth scrolling between sections. Here is a basic example to get you started:
For more detailed usage instructions and example configurations, please refer to the documentation.
Contribution We welcome contributions from the community to help improve and enhance react-sections-scroller.
Let's make smooth scrolling even better together!
Thank you for considering react-sections-scroller for your project. We hope it brings a smooth and enjoyable scrolling experience to your users. If you have any questions or need further assistance, please don't hesitate to reach out.
Happy scrolling! 🚀🌟
License 🔖
MIT.