DEV Community

Bram Hammer
Bram Hammer

Posted on

2

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)

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay