Rerousel - light & simple infinite carousel for React

Modularity and reusability are one of the React principles. React components are independent and reusable chunks of code that are responsible for one specific thing, this kind of approach helps to keep your code clean & elegant. Rerousel is the simplest and the lightest infinite carousel component package made for React aiming to provide a way of showcasing your app's compliant with these principles:

• Lightweight - Rerousel is the lightest working infinite React JS carousel available to download from the NPM. It's using only the packages that are necessary so you dont have to worry about thousands of excessive dependencies flooding your application,

• Versatile - no matter if you are building an enterprise eCommerce app and need to show off your products or personal project to display your holiday pictures - Rerousel is there for you. It supports all types of JSX elements, so you don't have to worry about compatibility,

• Simple - setting up your carousel is super easy, you only need to install the package and import Rerousel, the component setup is effortless.

npm install rerousel

import { Rerousel } from 'rerousel';

How to use it

Using Rerousel is pretty simple. Begin with installing the package using npm:

npm install rerousel

The next step is importing Rerousel into your React project:

import { Rerousel } from 'rerousel';

then placing it in the desired position in your app and populating with the items you want to showcase and creating a ref pointing at your outermost item inside of the Rerousel and including it in the Rerousel as itemRef prop.

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>    );};

And that's it! Now you can enjoy the simplest, the lightest & the most reliable infinite carousel package made for React. If you want to get more info on it make sure to visit Rerousel's repo on GitHub.

PS: Don't forget to leave a star ;)

Speed up your GraphQL API development

GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. Try GraphQL Editor for free!