react-scroll-to-next v1.1.5

react-scroll-to-next

react-scroll-to-next is a React component that enables smooth scrolling between sections of a webpage. When you click on the button positioned at the bottom-right corner, the page scrolls to the next section. Once the last section is reached, clicking the button loops back to the first section. This is useful for creating smooth, interactive websites where users can easily navigate through content by scrolling through different sections.

Features

• Smooth Scroll: Scroll between sections smoothly with scrollIntoView.
• Circular Navigation: After reaching the last section, the button loops back to the first section.
• Customizable: You can style the button as needed by passing in a style prop.
• Positioning: The button is always fixed at the bottom-right corner, making it easy for users to navigate between sections.To install react-scroll-to-next via npm, run the following command:

npm install react-scroll-to-next

Alternatively, you can install it using yarn:

yarn add react-scroll-to-next

Usage/Examples

To use react-scroll-to-next in your React application, follow these steps:

• Create refs for each section you want to scroll through.
• Pass the refs array to the ScrollToNext component.
• Click the button to smoothly scroll between sections.

Examples

import React, { useRef } from "react";
import { ScrollToNext } from "react-scroll-to-next";

const App: React.FC = () => {
  // Create refs for each section
  const section1Ref = useRef(null);
  const section2Ref = useRef(null);
  const section3Ref = useRef(null);

  // Define the sections array
  const sections = [section1Ref, section2Ref, section3Ref];

  return (
    <div>
      <div
        ref={section1Ref}
        style={{ height: "100vh", backgroundColor: "#f1f1f1" }}
      >
        <h2>Section 1</h2>
      </div>
      <div
        ref={section2Ref}
        style={{ height: "100vh", backgroundColor: "#e0e0e0" }}
      >
        <h2>Section 2</h2>
      </div>
      <div
        ref={section3Ref}
        style={{ height: "100vh", backgroundColor: "#d0d0d0" }}
      >
        <h2>Section 3</h2>
      </div>

      {/* ScrollToNext button */}
      <ScrollToNext sections={sections} />
    </div>
  );
};

export default App;

Props

Button Styling

By default, the button is a fixed, circular button located at the bottom-right corner of the screen. It contains a simple arrow (➤) to indicate that it scrolls to the next section. You can easily style the button further by passing a custom style object to the component.

Example:

<ScrollToNext
  sections={sections}
  style={{
    backgroundColor: "#4CAF50",
    padding: "15px",
    fontSize: "20px",
    borderRadius: "50%",
    boxShadow: "0 4px 15px rgba(0, 0, 0, 0.2)",
  }}
/>

Horizontal and Vertical Offset (x, y)

Defaults:

• x: "20px" (distance from the right edge of the screen).
• y: "20px" (distance from the bottom edge of the screen). Description: Customize the button's position on the screen. Accepts any valid CSS unit (e.g., "5px", "10%", "1rem").

Example Usage:

   <ScrollToNext sections={sections} x={"5px"} y={"10px"}/>

Show on Mobile (showOnMobile)

Default: true

Description: Toggles the visibility of the button on mobile devices.

• true: The button is rendered on all devices.
• false: The button is hidden on devices with a screen width of 768px or less.

Example Usage:

  <ScrollToNext sections={sections} x={"5px"} y={"10px"} showOnMobile={false}/>

Contributing

Feel free to open issues and submit pull requests if you have suggestions or bug fixes. Your contributions are welcome!

Github

License

ISC

Author

Malhar Chauhan Github