react-cards-slider v1.0.9

react-cards-slider

A customizable and Responsive React component for cards sliding built with TypeScript.

Live Demo

Check out the CodePen example.

Installation

Install the package via npm:

npm install react-cards-slider

Or using yarn:

yarn add react-cards-slider

📌 Note

This package from version 1.0.4 works with any react version supporting hooks.

Usage

Import the SliderContainer component and use it in your React application:

import SliderContainer from "react-cards-slider";

function App() {
  const cards = [1,2,3,4,5,6];

  const buttonClasses = `font-serif w-12 h-12 flex justify-center items-center rounded-full 
          bg-gradient-to-r from-slate-300 to-blue-100 shadow-md disabled:cursor-not-allowed
          active:scale-95 disabled:opacity-50`

  return (
    <div className='w-10/12 m-auto mt-10'>
      <SliderContainer
        containerClasses='flex justify-center items-center shadow-md'
        leftButtonClasses={`${buttonClasses} mr-3`}
        rightButtonClasses={`${buttonClasses} ml-3`}
        cardsWrapperClasses='gap-4'
      >
        {
          cards.map((card) => {
            return <div 
              key={card} 
              className={`bg-gradient-to-r from-teal-400 to-yellow-200 text-2xl font-light flex justify-center 
                items-center h-60 w-52 border border-green-500 rounded-md shrink-0`}
              >
              {card}
            </div>
          })
        }
      </SliderContainer>
    </div>
  )
}

export default App

Props

License

MIT