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.

Table of contents

• Live demo
• How to use?
• Props
• Contribute
• Issues

Live demo

You can check out the Rerousel sandbox HERE

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 | 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.