Chakra-framer-carousel NPM

chakra-framer-carousel

Note: this package is still under active development. However, the API should remain stable from this point onwards.

npm npm NPM

Demo

Show me right now

Features

Hooks for creating a carousel
Composition pattern allowing for extensibility
No external dependencies

Todo

Some sort of testing.
JSDoc comments for functions.
Add more custom examples.

Installation

yarn add chakra-framer-carousel

Size

Bundling strategy is based on vite-dts. If paypal ever accept my application, the team are getting a ☕️. Bundlephobia does not accept esnext so this is from the Vite build.

File	Size
dist/chakra-framer-carousel.es.d.ts	0.03 KiB
dist/chakra-framer-carousel.es.js	7.17 KiB / gzip: 1.81 KiB
dist/chakra-framer-carousel.es.js.map	8.52 KiB
dist/chakra-framer-carousel.cjs.d.ts	0.03 KiB
dist/chakra-framer-carousel.cjs.js	8.43 KiB / gzip: 2.17 KiB
dist/chakra-framer-carousel.cjs.js.map	8.65 KiB

Usage

Note: Carousels are not always an ideal design choice.

Basic Example

import {
  Carousel,
  CarouselItem,
  CarouselItems,
} from "chakra-framer-carousel";

function CarouselDemo() {
  return (
    <Carousel>
      <CarouselItems>
        {images.map((image, index) => {
          return (
            <CarouselItem index={index} key={image}>
              <Card index={index} image={image} />
            </CarouselItem>
          );
        })}
      </CarouselItems>
      <Toolbar />
    </Carousel>
  );
}

Testimonials Example

Props

Component	Description
Carousel	The wrapper that provides context for its children. Children have access to the useCarousel hook. Accepts `getMotionStyles` props for customizing the animation.
CarouselItems	The wrapper that converts children into individual carousel items. Accepts FlexProps too.
CarouselItem	The wrapper around a carousel item allowing for use of the useCarouselItem hook.
MotionFlex	Chakra-UI flex with framer-motion props.

Hooks

useCarousel

Can be used by any component wrapped within a `Carousel` provider. A common use case is a toolbar to navigate between carouel items.

Property	Description	Type	Returns
onNext	Move carousel forwards	Function	null
onPrevious	Move carousel backwards	Function	null
findPosition	Find a carousel item's current position	Function	"left" \| "center" \| "right" \| "hidden"
numberOfSlides	Count of carousel items	Number	Number
state	React state for the carousel elements	Array \| Null	null \| React.ReactElement<any, string \| React.JSXElementConstructor>[]
_onInitialize	Internal hook to create initial starting state	Function	void

useCarouselItem

Can be used by any component wrapped within a `CarouselItem` provider. A common use case is the actual individual carousel item such as an image.

Property	Description	Type	Returns
onNext	Move carousel forwards	Function	null
onPrevious	Move carousel backwards	Function	null
position	A carousel item's current position	String	"left" \| "center" \| "right" \| "hidden"
numberOfSlides	Count of carousel items	Number	Number
onClickHandler	Action when left or right card is clicked	Function	void \| null

Explaining and Customizing the animation

TODO

Known Issues

Background Opacity Bug: if no background is set in the global theme or direct parent divs, you can see a hidden card.
onInitialize function should be prefixed with an underscore to mark it as internal.