https://github.com/roginfarrer/react-aria-carousel

Unstyled React hooks and components for building a DOM-first, accessible carousel
https://github.com/roginfarrer/react-aria-carousel

a11y accessibility carousel reactjs slider

Last synced: 2 months ago
JSON representation

Unstyled React hooks and components for building a DOM-first, accessible carousel

• Host: GitHub
• URL: https://github.com/roginfarrer/react-aria-carousel
• Owner: roginfarrer
• License: mit
• Created: 2024-05-08T00:03:24.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-07-19T22:17:24.000Z (6 months ago)
• Last Synced: 2024-07-20T04:33:04.822Z (6 months ago)
• Topics: a11y, accessibility, carousel, reactjs, slider
• Language: TypeScript
• Homepage: https://react-aria-carousel.vercel.app
• Size: 20.6 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🎠 React Aria Carousel

> The carousel for the modern age.

**React Aria Carousel** is a collection of React hooks and components that provide the behavior and accessibility implementation for building a carousel. Unlike many other carousels, this implementation uses the latest browser and DOM APIs for scrolling and snapping.

Checkout documentation and examples at https://react-aria-carousel.vercel.app.

## Features

- Native **browser scroll-snapping and smooth-scrolling** for performant transitions across pointer types.

- **Comprehensive behavior and accessibility coverage** for all elements of a carousel, including pagination, infinite scrolling, autoplay, and more.

- Support for showing **one or many items per page**, implemented with responsive-design.

- Support for **vertical and horizontal** scrolling.

- Support for **infinite scrolling**.

- Support for **autoplay** with affordances for disabling it.

- Support for **mouse dragging**.

- Written in **TypeScript**.

## Installation

```sh

npm install react-aria-carousel

```

## Usage

`react-aria-carousel` comes with both ready-to-go unstyled React components and hooks if you need more control over how the component is rendered.

A simple set-up using the components:

```tsx

import {

  Carousel,

  CarouselButton,

  CarouselButton,

  CarouselItem,

  CarouselScroller,

  CarouselTab,

  CarouselTabs,

} from "react-aria-carousel";

  

  

  

  

    

  

  

    {(page) => (

      

    )}

  

```

And a simple set-up using the hooks:

```tsx

import {

  useCarousel,

  useCarouselItem,

  useCarouselTab,

} from "react-aria-carousel";

export function Carousel() {

  const [assignScrollerRef, carousel] = useCarousel({

    spaceBetweenItems: "16px",

    itemsPerPage: 2,

  });

  const {

    rootProps,

    prevButtonProps,

    nextButtonProps,

    scrollerProps,

    tabProps,

    pages,

    autoplayControlProps,

  } = carousel;

  return (

    


      Toggle autoplay

      


        Previous

        Next

      

      


        

      

      


        {pages.map((_, i) => (

          

        ))}

      

    

  );

}


function CarouselItem({ index, state }) {

  const { itemProps } = useCarouselItem({ index }, state);

  return 
;

}


function CarouselTab({ index, state }) {

  const { tabProps } = useCarouselTab({ index }, state);

  return 
;

}

```