Learn about our RFC process, Open RFC meetings & more.Join in the discussion! ¬Ľ

@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

3

Version

1.5.1

License

MIT

Unpacked Size

20.2 kB

Total Files

7

Last publish

Collaborators

  • avatar