A simple and light infinite carousel package made for React

rerousel

Rerousel is the simplest and the lightest infinite carousel package made for React.

Simple

Set up your carousel in the blink of an eye. You only have to install the package - the component setup is effortless!

Lightweight

Rerousel is the lightest working infinite react carousel available to download from the NPM, using only the packages that are necessary. You don’t have to worry about thousands of dependencies flooding your application!

Versatile

Either you want to show off your products, customers or even holiday pictures - Rerousel is there for you.
It supports all types of JSX elements, so you don't have to worry about compatibility.

How to use?

1. Install the package using npm

npm install rerousel

2. Import rerousel in the component you want to use it

import { Rerousel } from 'rerousel';

3. Place it in the desired position and fill it with the items you want to showcase

export const Component: React.FC<CustomersProps> = ({ customers }) => {
    const customerLogo = useRef(null);

    return (
        <Container>
            <Rerousel itemRef={customerLogo}>
                {customers.map((c) => {
                    return <Img key={c.image} image={c.image} ref={customerLogo} />;
                })}
            </Rerousel>
        </Container>
    );
};

4. Create a ref pointing at your outermost item inside of the rerousel and include it in the Rerousel as "itemRef" prop.
   You can also determine the interval using "interval" prop in milliseconds, but you don't have to - default value is 3 seconds.

Props

Prop	Type	Default	Required?	Description
itemRef	RefObject<HTMLElement>	undefined	Yes	Reference to the outermost item of carousel - used to retrieve information about item's width
interval	Number	3000	No	Interval length in milliseconds
stop	Boolean	false	No	Should the carousel stop?

Contribute

1. Fork this repo
2. Create your feature branch: git checkout -b feature-name
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

Example - testimonials carousel

Issues

If you encounter any issues when using Rerousel package, please add a new issue - we will get to it as fast as it's possible.