Wypróbuj Rerousel – najprostszą karuzelę dla Reacta

Modularność i możliwość ponownego wykorzystania to jedne z głównych zasad Reacta. Komponenty React to niezależne i wielokrotnego użytku fragmenty kodu, odpowiedzialne za jedno, konkretne zadanie. Dzięki temu podejściu kod pozostaje przejrzysty i elegancki. Rerousel to najprostszy i najlżejszy pakiet komponentu nieskończonej karuzeli stworzony dla Reacta, mający na celu pokazanie, że Twoja aplikacja przestrzega tych właśnie zasad:

• Prosty – Konfiguracja karuzeli jest bardzo łatwa: wystarczy zainstalować pakiet, zaimportować Rerousel i ustawienie komponentu jest bezwysiłkowe,
• Lekki – Rerousel to najlżejsza działająca karuzela React JS typu infinite dostępna do pobrania z NPM. Korzysta tylko z niezbędnych pakietów, więc nie musisz się martwić o tysiące zbędnych zależności, które zaśmiecą Twoją aplikację,
• Wszechstronny – Nie ma znaczenia, czy tworzysz aplikację eCommerce dla firm i chcesz zaprezentować swoje produkty, czy to Twój prywatny projekt do pokazywania zdjęć z wakacji – Rerousel jest dla Ciebie. Obsługuje wszystkie typy elementów JSX, więc nie musisz martwić się o kompatybilność.

Jak tego używać

Zainstaluj pakiet przy pomocy npm:

    npm install rerousel

Następnie zaimportuj Rerousel do swojego projektu React:

import { Rerousel } from "rerousel";

Umieść go w swojej aplikacji i wypełnij elementami, które chcesz zaprezentować, utwórz ref wskazujący na najzewnętrzniejszy element i przekaż go do Rerousel jako prop itemRef.

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

Voilà! Ciesz się najprostszą, najlżejszą i najbardziej niezawodną karuzelą stworzoną dla Reacta. Jeśli chcesz dowiedzieć się więcej, koniecznie zajrzyj do repozytorium Rerousel na GitHubie.