Skip to content

AllInOneYT/react-button-slider

Repository files navigation

react-button-slider

Wrap all your buttons or any component in react-button-slider and it will be horizontally scrollable without any scrollbar

Example Example

Installation

npm

npm i @gunawanedy/react-button-slider

yarn

yarn add @gunawanedy/react-button-slider

Example

import React from 'react';

import ReactButtonSlider from '@gunawanedy/react-button-slider';

const App = () => {
  return (
    <>
      <ReactButtonSlider>
        {/*you can add styling for your button using css*/}
        <button>Category 1</button>
        <button>Category 2</button>
        <button>Category 3</button>
        <button>Category 4</button>
      </ReactButtonSlider>
      <main className="content">
        <h1>Your Contents</h1>
      </main>
    </>
  );
};

export default App;

Props

Name Type Default Description
Children any any component or element
overscrollTransition string transform .3s cubic-bezier(.25,.8,.5,1) css transition property
dragAcceleration number 1 drag acceleration