DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Snap Scroll in React in Less than a Minute
Ranjan Singh
Ranjan Singh

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!