GraphQL Editor LogoTry GraphQL Editor

Rerousel - light & simple infinite carousel for React

February 03, 2021 by Tomek

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

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

React Rerousel


Speed up your GraphQL API development

The 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 thanks to dozens of built-in micro features. Its graphical interface will also fix communication within your product team. Visualization is the key!

Try it for free

Tomek Poniatowicz
Written by Tomek Poniatowicz GraphQL enthusiast. Magic the Gathering fanatic. Pizza monster. email me:[email protected]Twitter Shield
← Back to blog

Menu

© Copyright 2018 Graphqleditor.com