Snap Scroll in React in Less than a Minute

Motivation:

We all have seen website which uses snap scrolling from one section to another traditionally we can do Animation in CSS and write a ton styles to achieve that Let’s do that within a Minute with help of react-use-scroll-snap.

Installation:

we just need to create a new react app and install react-use-scroll-snap.

npx create-react-app test-app
yarn add react-use-scroll-snap

Usage:

Import useScrollSnap hook and pass the ref of the component.
I’m using default react app duplication header and just changing the page name for simplicity you can use your components.

import { useRef } from "react";
import useScrollSnap from "react-use-scroll-snap";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const scrollRef = useRef(null);
  useScrollSnap({ ref: scrollRef, duration: 50, delay: 20 });
  return (
    <div className="App" ref={scrollRef}>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Page 1</p>
      </header>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>page 2</p>
      </header>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Page 3</p>
      </header>
    </div>
  );
}

export default App;

That’s it we have snap scroll in our app. This post is focust on react you can do same thing for Vanilla JS with scroll-snap Cheers.

Print Share Comment Cite Upload Translate

APA

Ranjan Singh | Sciencx (2024-04-18T16:47:16+00:00) » Snap Scroll in React in Less than a Minute. Retrieved from https://www.scien.cx/2022/10/01/snap-scroll-in-react-in-less-than-a-minute/.

MLA

" » Snap Scroll in React in Less than a Minute." Ranjan Singh | Sciencx - Saturday October 1, 2022, https://www.scien.cx/2022/10/01/snap-scroll-in-react-in-less-than-a-minute/

HARVARD

Ranjan Singh | Sciencx Saturday October 1, 2022 » Snap Scroll in React in Less than a Minute., viewed 2024-04-18T16:47:16+00:00,<https://www.scien.cx/2022/10/01/snap-scroll-in-react-in-less-than-a-minute/>

VANCOUVER

Ranjan Singh | Sciencx - » Snap Scroll in React in Less than a Minute. [Internet]. [Accessed 2024-04-18T16:47:16+00:00]. Available from: https://www.scien.cx/2022/10/01/snap-scroll-in-react-in-less-than-a-minute/

CHICAGO

" » Snap Scroll in React in Less than a Minute." Ranjan Singh | Sciencx - Accessed 2024-04-18T16:47:16+00:00. https://www.scien.cx/2022/10/01/snap-scroll-in-react-in-less-than-a-minute/

IEEE

" » Snap Scroll in React in Less than a Minute." Ranjan Singh | Sciencx [Online]. Available: https://www.scien.cx/2022/10/01/snap-scroll-in-react-in-less-than-a-minute/. [Accessed: 2024-04-18T16:47:16+00:00]

rf:citation

» Snap Scroll in React in Less than a Minute | Ranjan Singh | Sciencx | https://www.scien.cx/2022/10/01/snap-scroll-in-react-in-less-than-a-minute/ | 2024-04-18T16:47:16+00:00

https://github.com/addpipe/simple-recorderjs-demo

Motivation:

Installation:

Usage:

Related Posts