DEV Community

loading...
Cover image for Rerousel - light & simple infinite carousel for React
GraphQL Editor

Rerousel - light & simple infinite carousel for React

tomekponiat profile image Tomek Poniatowicz Originally published at blog.graphqleditor.com ・2 min read

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 don’t 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.

GitHub logo aexol-studio / rerousel

Simplest carousel for react

Rerousel logo

Rerousel gif

npm npm downloads

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

How to use?

  1. Install the package using npm
npm install rerousel
  1. Import rerousel in the component you want to use it
import { Rerousel } from 'rerousel';
Enter fullscreen mode Exit fullscreen mode
  1. Place it in the desired position and fill it with…

How to use it

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

npm install rerousel
Enter fullscreen mode Exit fullscreen mode

The next step is importing Rerousel into your React project:

import { Rerousel } from 'rerousel';
Enter fullscreen mode Exit fullscreen mode

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>
    );
};
Enter fullscreen mode Exit fullscreen mode

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

React
Rerousel


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!

New features of GraphQL Editor gif

Discussion (1)

pic
Editor guide
Collapse
razvanstatescu profile image
Răzvan Stătescu

Added on the list :) I'll check it out with the first opportunity.