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