https://github.com/melvynx/react-clear-carousel

simple and light react carousel
https://github.com/melvynx/react-clear-carousel

carousel light react simple slider small typescript very-light

Last synced: 7 months ago
JSON representation

simple and light react carousel

• Host: GitHub
• URL: https://github.com/melvynx/react-clear-carousel
• Owner: Melvynx
• License: mit
• Created: 2021-02-28T10:51:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-09-23T13:50:22.000Z (about 4 years ago)
• Last Synced: 2025-03-18T13:05:03.502Z (7 months ago)
• Topics: carousel, light, react, simple, slider, small, typescript, very-light
• Language: TypeScript
• Homepage: https://melvynx.github.io/react-very-light-carousel/
• Size: 5.06 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  





  

  

  


  

  





Clear react carousel easy to integrate, he is very light and use 0 dependency.

It is a carousel that will be customizable and offers great posibilities.

Go test the demo online [react-clear-carousel demo](https://melvynx.github.io/react-clear-carousel/).

## Why

I needed to make a really simple carousel. I looked for a library, but none was as light, simple and modular as I wanted.

So I made my carousel and once finished I wanted to share it.

## Quick startup 🚀

#### - Install the npm dependency in a react project

```bash

npm install --save react-clear-carousel

# of

yarn add react-clear-carousel

```

## Usage 🛠

This is the most minimal exemple.

```tsx

import React from 'react'

import {

  CarouselElement,

  CarouselWrapper,

  NextSlideAction,

  PrevSlideAction,

  SliderElementProps

} from 'react-clear-carousel'

const datas = [

  { id: 0, text: 'slider 1' },

  { id: 1, text: 'slider 2' },

  { id: 2, text: 'slider 3' }

]

const Carousel = () => {

  return (

    


      

        

          

        

        

          Prev

        

        

          Next

        

      

    

  )

}


const Element = ({

  className,

  data

}: SliderElementProps<{ id: number; text: string }>) => {

  return (

    


      


        
{data?.text}

      

    

  )

}

```


## How 🕵️‍♂️

The carousel is a delimited element that has an `overflow: hidden` (🟠 orange box) with a much longer child (🔵 blue box) that contains the slides (🟢 green box) and that will change the number of pixels to be moved to the left during a slide animation.



## API 👁

#### useSimpleSlider

This hook is used by the CarouselWrapper.

```ts

import { useSimpleSlider } from 'react-clear-carousel'

export type SimpleSliderConfig = {

  listLength: number // length of your datas

  size: {

    element: number // size of one element

    margin: number // margin of one element

  }

  reverse?: boolean // true and the carousel go left to right

  transition?: string // transition when carousel slide change

}

function useSimpleCarousel(

  config: SimpleSliderConfig

): {

  nextSlide: () => void // handle the next slide

  prevSlide: () => void // handle the prev slide,

  setSlide: () => void // set slide to specific id,

  classes: {

    // different class for elements

    card: string

    flexBox: string

    root: string

  }

}

```

#### CarouselWrapper

```ts

import { CarouselWrapper } from 'react-clear-carousel'

export type CarouselWrapperProps = {

  datas: T[] // data given for different slide

  currentSize: {

    element: number // size of one element

    margin: number // margin of one element

  }

  children: React.ReactElement | React.ReactElement[]

  reverse?: boolean // true and the carousel go left to right

  transition?: string // transition when carousel slide change

}

function CarouselWrapper(props: CarouselWrapperProps)

```

#### CarouselElement

This element use the context of CarouselWrapper.

```ts

import { CarouselElement } from 'react-clear-carousel'

type HorizontalSliderProps = {

  children: React.ReactElement // element for each slide

  rootClassname?: string // classname for the root

  elementBoxClassname?: string // classname for elements flex box

}

function CarouselElement(props: HorizontalSliderProps)

```

#### NextSlideAction

Those elements use the context of CarouselWrapper.

The children will have a `onClick` props to handle next / prev slide.

```tsx

import { NextSlideAction, PrevSlideAction } from 'react-simple-slider'

const Buttons = () => (

  


    

      Prev slide

    

    

      Next slide

    

  

)

```


## License

MIT © [Melvynx](https://github.com/Melvynx)