React carousel query

A infinite carousel component made with react that handles the pagination for you.

Version: 0.2.1 Updated: 05/14/2022

By: pedrocostadev License: MIT

Downloads Last 30 Days: 13

react-carousel-query

NPM

  • React Component
  • Developed to be used as a Infinite Carousel but can be used also with limited resources
  • Handles the pagination requests for you
  • Dependencies free (only React)
  • Allow you to render slides as you wish
  • Ensures a good performance
  • Prepared for mobile and desktop
  • TypeScript declarations included
  • Customizable

Demo here

Screenshot

Props

  • fetchStep: Number of items requested in each GET call (optional, default is 3)
  • hideIndex: Avoid displaying the index on top right corner (optional, default is false)
  • showArrows: Show arrows (optional, default is false). Passing the renderArrow prop also makes the arrows to render.
  • renderBadge: Render the badge component as you wish. (optional)
  • renderArrow: Render the arrow component as you wish. (optional, see example)
  • renderItem: Render each slide as you wish!
  • getData: Async function that should return the fetched items. Should respect the following format:
    { offset: number; total: number; items: { id }[] }
const getData = async ({ offset, limit }) => {
  const url = `http://someApi.com?offset=${offset}&limit=${limit}`;
  const { data } = await (await fetch(url)).json();
  return {
    offset: data.offset,
    total,
    items: data.results.map(item => ({...item, id: item.name })),
  };
};

How to use

Setup

  • yarn on root folder

How to run

  • yarn start:dev or yarn start

How to build

  • yarn build or yarn build:dev

Contributions

Contributions are welcome. Just open a PR and feel free to contact me :-).

You can also start looking into ope issues, specially the ones with good first issue label.

ToDo

  • Storybook (soon)
Categories: React js