@types/react-scroll

What is @types/react-scroll?

@types/react-scroll provides TypeScript definitions for the react-scroll library, which is used for smooth scrolling and navigation within a React application.

What are @types/react-scroll's main functionalities?

Smooth Scrolling

This feature allows you to create smooth scrolling links to different sections of your page. The `Link` component is used to create a clickable link that scrolls smoothly to the target `Element`.

import { Link, Element } from 'react-scroll';

const SmoothScrollExample = () => (
  <div>
    <Link to="section1" smooth={true} duration={500}>Go to Section 1</Link>
    <Element name="section1">
      <h1>Section 1</h1>
    </Element>
  </div>
);

Scroll Events

This feature allows you to register and handle scroll events. You can use the `Events` object to register callbacks for the beginning and end of a scroll event, and the `scroller` object to programmatically scroll to a specific element.

import { Events, scroller } from 'react-scroll';

class ScrollEventExample extends React.Component {
  componentDidMount() {
    Events.scrollEvent.register('begin', function() {
      console.log('begin', arguments);
    });

    Events.scrollEvent.register('end', function() {
      console.log('end', arguments);
    });
  }

  componentWillUnmount() {
    Events.scrollEvent.remove('begin');
    Events.scrollEvent.remove('end');
  }

  scrollTo() {
    scroller.scrollTo('myScrollToElement', {
      duration: 800,
      delay: 0,
      smooth: 'easeInOutQuart'
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.scrollTo}>Scroll to element</button>
        <Element name="myScrollToElement">
          <h1>Scroll to me</h1>
        </Element>
      </div>
    );
  }
}

Scroll Spy

This feature allows you to highlight navigation links based on the current scroll position. The `spy` prop on the `Link` component enables this functionality, and the `scrollSpy` object is used to update the scroll position.

import { Link, Element, Events, scrollSpy } from 'react-scroll';

class ScrollSpyExample extends React.Component {
  componentDidMount() {
    Events.scrollEvent.register('begin', function() {
      console.log('begin', arguments);
    });

    Events.scrollEvent.register('end', function() {
      console.log('end', arguments);
    });

    scrollSpy.update();
  }

  componentWillUnmount() {
    Events.scrollEvent.remove('begin');
    Events.scrollEvent.remove('end');
  }

  render() {
    return (
      <div>
        <Link to="section1" spy={true} smooth={true} duration={500}>Section 1</Link>
        <Link to="section2" spy={true} smooth={true} duration={500}>Section 2</Link>
        <Element name="section1">
          <h1>Section 1</h1>
        </Element>
        <Element name="section2">
          <h1>Section 2</h1>
        </Element>
      </div>
    );
  }
}

Other packages similar to @types/react-scroll

react-router-hash-link

react-router-hash-link provides smooth scrolling to hash links within a React Router application. It is similar to react-scroll but is specifically designed to work with React Router.

react-scrollable-anchor

react-scrollable-anchor allows you to create scrollable anchor links in a React application. It provides similar smooth scrolling functionality but focuses on anchor links rather than custom elements.

react-scrollspy

react-scrollspy is a React component that monitors scroll events and updates the active class on navigation links. It is similar to the scroll spy feature in react-scroll but is a standalone package.

README

Installation

npm install --save @types/react-scroll

Summary

This package contains type definitions for react-scroll (https://github.com/fisshy/react-scroll).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-scroll.

Additional Details

• Last updated: Tue, 07 Nov 2023 09:09:39 GMT
• Dependencies: @types/react

Credits

These definitions were written by Ioannis Kokkinidis, and Giedrius Grabauskas.