CarouselWithFullView
Component | Source Code
extends CarouselProps
Props Inheritance Hierarchy: ComponentPropsWithRef<“div”> -> FlexboxProps -> CarouselProps
A variant of the Carousel that additionally has an area where the active item displays in a full view.
For example, in the case of an image carousel, you may produce a
small thumbnail image for renderItem. For renderFullView you
may produce a larger version of the image.
The component resolves to a Flexbox that has a container
within it (with the jtjs-carousel-full-view-area class). Below that
is a Carousel.
Because this component is logically a composed extension of a Carousel,
all props go to the underlying carousel. If you want to pass props to the
outermost container, you can use the containerProps prop. If you want to pass
props to the container for the full view, you can use the fullViewAreaProps prop.
Properties
Section titled “Properties”getItemKey: CarouselItemIteratee<T, string>
Section titled “getItemKey: CarouselItemIteratee<T, string>”Determines the key of the item
items: T[]
Section titled “items: T[]”renderFullView: Function
Section titled “renderFullView: Function”renderItem: CarouselItemIteratee<T, ReactNode>
Section titled “renderItem: CarouselItemIteratee<T, ReactNode>”Determines how the item is rendered for the user to see.
activeItem?: null | T
Section titled “activeItem?: null | T”The currently active item. Pass if you want to control the component.
null can be used when there is no currently active item, but you’d still
like to control the component.
areItemsEqual?: Function
Section titled “areItemsEqual?: Function”(Optional, defaults to a function that determines whether item1 === item2)
Allows you to customize how the carousel understands that two items are the same.
This function is how the carousel determines when the active item changes.
This function can be useful if the items in your carousel are complex. For example, you may want two objects to be equivalent if they have the same ID rather than checking that they’re the same reference.
containerProps?: FlexboxProps
Section titled “containerProps?: FlexboxProps”defaultActiveItem?: T
Section titled “defaultActiveItem?: T”The item that’s active by default.
This only has an effect when the component
is uncontrolled. If you want to control the component and have a default,
just set activeItem’s first value to the desired default.
direction?: “row” | “column”
Section titled “direction?: “row” | “column””(Optional, defaults to row) The direction that the contents of the Flexbox
flow.
fullViewAreaProps?: FlexboxProps
Section titled “fullViewAreaProps?: FlexboxProps”getItemContainerProps?: CarouselItemIteratee<T, undefined | Omit<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, “ref”>>
Section titled “getItemContainerProps?: CarouselItemIteratee<T, undefined | Omit<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, “ref”>>”A useful iteratee to have finer control over the props that get passed to the containers that wrap each item in the carousel.
Returns
Section titled “Returns”The props for the container that wraps each item in the carousel.
horizontalAlignment?: HorizontalAlignment
Section titled “horizontalAlignment?: HorizontalAlignment”onChangeActiveItem?: Function
Section titled “onChangeActiveItem?: Function”Callback for when the user attempts to change the active item.
renderPlaceholderFullView?: Function
Section titled “renderPlaceholderFullView?: Function”Allows you to render something when there’s no active item. If this isn’t specified, nothing is rendered.
reverseDirection?: boolean
Section titled “reverseDirection?: boolean”(Optional, defaults to false) Whether the flow direction of the Flexbox’s
contents should be reversed.
reverseWrap?: boolean
Section titled “reverseWrap?: boolean”spacing?: string
Section titled “spacing?: string”(Optional, defaults to 0.5rem) How much space to put between the contents of
the Flexbox.
verticalAlignment?: VerticalAlignment
Section titled “verticalAlignment?: VerticalAlignment”wrap?: boolean
Section titled “wrap?: boolean”(Optional, defaults to false) Whether the contents of the Flexbox should
wrap.