Nonlinear Programming Methods

    @lucarestagno/use-scroll-into-view
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    use-scroll-into-view 📌

    useScrollIntoView is a React Hook that uses scrollIntoView to scroll a DOM Node into the view, when an extenal condition occcurs.

    Installation

    npm i @lucarestagno/use-scroll-into-view

    Usage

    import React, { useRef } from 'react'
    import useScrollIntoView from 'use-scroll-into-view'
    
    const ListItem = ({ isSelected, itemName }) => {
      const itemRef = useRef(null)
      useScrollIntoView(itemRef, isSelected)
    
      return (
        <li ref={itemRef}>
          {itemName}
        </li>)
    }

    The list item is moved into the view by automatically scrolling the container (the body or another html tag).

    This is particularly useful when you have a set of elements in the page that can be outside the view, and you want to automatically move into the visible are.

    The scroll works vertically and horizontally.

    Typescript

    The package exports the following types

    type ScrollIntoViewOptions = {
      behavior?: keyof typeof ScrollIntoViewBehavior
      block?: keyof typeof ScrollIntoViewBlock
      inline?: keyof typeof ScrollIntoViewInline
    }
    
    enum ScrollIntoViewBehavior {
      auto = "auto",
      smooth = "smooth"
    }
    
    enum ScrollIntoViewBlock {
      start = "start",
      center = "center",
      end = "end",
      nearest = "nearest"
    }
    
    enum ScrollIntoViewInline {
      start = "start",
      center = "center",
      end = "end",
      nearest = "nearest"
    }

    Customize the scroll

    scrollIntoView has an option object, that can be used to define the desired scroll behavior.

    You can find the full documentation on MDN

    Install

    npm i @lucarestagno/use-scroll-into-view

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    7.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • ikoichi2112