‚̧Noisy Pterodactyl Melodies

    @elissaioskon/scrollable-list

    1.5.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    Scrollable List

    CircleCI Npm Codecov Licence

    Scroll to an element within a list easily ūüėÉ

    Codesandbox example

    Motivation

    A common ui scenario is a list with some items. User should be able to move on next item in the list on some keypress (e.g on down arrow click) and the scroll should move to that element too. In order to achieve that with react, a ref should be kept for every list item in order to move scroll to that item. This library makes this task easy to achieve.

    import React, {useRef, useState} from 'react'
     
    const emojis = [
    ¬†¬†"ūüėĬ†Grinning¬†Face",
    ¬†¬†"ūüėɬ†Grinning¬†Face¬†With¬†Big¬†Eyes",
    ¬†¬†"ūüėĄ¬†Grinning¬†Face¬†With¬†Smiling¬†Eyes"
     ]
     
    const App = () => {
        const ref = useRef()
        const [currentScrollIndex, setCurrentScrollIndex] = useState(0)
        
        return (
          <>
              <ScrollView ref={ref}>
                  <div className="list-container">
                    {emojis.map( emoji => (
                       <ScrollableElement>
                          <div className="list-item">{emoji}</div>
                       </ScrollableElement>
                    ))}
                  </div>
              </ScrollView>
              
             <button onClick = {()=> ref.current.scroll.toPreviousItem(currentScrollIndex, setCurrentScrollIndex)}>Scroll to Previous</button>
             <button onClick = {()=> ref.current.scroll.toNextItem(currentScrollIndex, setCurrentScrollIndex)}>Scroll to Next</button>
             <button onClick = {()=> ref.current.scroll.toIndex(5, setCurrentScrollIndex)}>Scroll to fifth Item</button>
          </>
        )
    }

    Install

    • Using yarn
      yarn add @elissaioskon/scrollable-list

    • Using npm
      npm install @elissaioskon/scrollable-list

    API

    Install

    npm i @elissaioskon/scrollable-list

    DownloadsWeekly Downloads

    4

    Version

    1.5.1

    License

    MIT

    Unpacked Size

    20.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar