DEV Community

Bram Hammer
Bram Hammer

Posted on

Yet Another Horizontall Scroller ( in react)

YAH-Scroller

NPM version Type License

Yet another horizontal scroller for React.
A simple and lightweight component that allows you to scroll horizontally through a list of items on both mobile and desktop with a small 'stretch' effect.

I couldn't find something fast enough so I made one myself it's simple and effective. Do you encounter any issues please let us know!

Example

Installation:

npm install yah-scroller --save-dev
Enter fullscreen mode Exit fullscreen mode

or

yarn add -D yah-scroller
Enter fullscreen mode Exit fullscreen mode

Usage :

Add YahScroller to your component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { YahScroller } from 'yah-scroller'
import 'yah-scroller/assets/style.scss'; 
// you can include the css version if needed

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <React.StrictMode>
        <div>
            <h2>Simple scroller</h2>
            <YahScroller className="horizontal-scroll">
                <div key={'c1'} className={'category'}>Category 1</div>
                <div key={'c2'} className={'category'}>Category 2</div>
                <div key={'c3'} className={'category'}>Category 3</div>
                <div key={'c4'} className={'category'}>Category 4</div>
                <div key={'c5'} className={'category'}>Category 5</div>
                <div key={'c6'} className={'category'}>Category 6</div>
            </YahScroller>
        </div>
    </React.StrictMode>,
)

Enter fullscreen mode Exit fullscreen mode

You like it? Or want something to be added?

Please let us know!
What I plan to add:

  • different version to use styled components of someone whishes to use it
  • more customisations possible
  • switch between vertical or horizontal
  • example page(s)

Top comments (0)