Gallery API

API documentation for Gallery component

GalleryRoot#

Props#

Defines valid properties in Gallery component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryRootInstance) => ReactNode)	null	The children to render.
activeIndex	number	0	The index of the active item.
onActiveIndexChange	(event: useGalleryChangeEvent) => void	null	Callback fired when the gallery's active index changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Gallery component.

name	type	default	description
root	GalleryRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of Gallery component.

values
ComponentInstance<GalleryRootProps, GalleryRootState, GalleryRootExposes>

GalleryBackdrop#

Props#

Defines valid properties in GalleryBackdrop component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryBackdropInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryBackdropInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryBackdropPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryBackdropInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of GalleryBackdrop component.

name	type	default	description
root	GalleryBackdropPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of GalleryBackdrop component.

values
ComponentInstance<GalleryBackdropProps, GalleryBackdropState, GalleryBackdropExposes>

GalleryContent#

Props#

Defines valid properties in GalleryContent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryContentInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryContentInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of GalleryContent component.

name	type	default	description
root	GalleryContentPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of GalleryContent component.

values
ComponentInstance<GalleryContentProps, GalleryContentState, GalleryContentExposes>

GalleryItem#

Props#

Defines valid properties in GalleryItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryItemInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryItemInstance) => ReactNode)	null	The children to render.
normalScale	number	1	The normal scale of the gallery item.
zoomedScale	number	3	The zoomed scale of the gallery item.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of GalleryItem component.

name	type	default	description
root	GalleryItemPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of GalleryItem component.

values
ComponentInstance<GalleryItemProps, GalleryItemState, GalleryItemExposes>

GalleryNext#

Props#

Defines valid properties in GalleryNext component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryNextInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryNextInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryNextPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryNextInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of GalleryNext component.

name	type	default	description
root	GalleryNextPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of GalleryNext component.

values
ComponentInstance<GalleryNextProps, GalleryNextState, GalleryNextExposes>

GalleryPrev#

Props#

Defines valid properties in GalleryPrev component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryPrevInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryPrevInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryPrevPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryPrevInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of GalleryPrev component.

name	type	default	description
root	GalleryPrevPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of GalleryPrev component.

values
ComponentInstance<GalleryPrevProps, GalleryPrevState, GalleryPrevExposes>

GalleryToolbar#

Props#

Defines valid properties in GalleryToolbar component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryToolbarInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryToolbarInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryToolbarPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryToolbarInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of GalleryToolbar component.

name	type	default	description
root	GalleryToolbarPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of GalleryToolbar component.

values
ComponentInstance<GalleryToolbarProps, GalleryToolbarState, GalleryToolbarExposes>

GalleryToolbarItem#

Props#

Defines valid properties in GalleryToolbarItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryToolbarItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryToolbarItemInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryToolbarItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryToolbarItemInstance) => ReactNode)	null	The children to render.
action	"next" \| "prev" \| "zoomIn" \| "zoomOut" \| "rotateLeft" \| "rotateRight" \| "flipX" \| "flipY" \| "download" \| "toggleFullScreen"	null	The action to perform.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of GalleryToolbarItem component.

name	type	default	description
root	GalleryToolbarItemPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of GalleryToolbarItem component.

values
ComponentInstance<GalleryToolbarItemProps, GalleryToolbarItemState, GalleryToolbarItemExposes>

GalleryThumbnail#

Props#

Defines valid properties in GalleryThumbnail component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryThumbnailInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryThumbnailInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryThumbnailPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryThumbnailInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of GalleryThumbnail component.

name	type	default	description
root	GalleryThumbnailPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of GalleryThumbnail component.

values
ComponentInstance<GalleryThumbnailProps, GalleryThumbnailState, GalleryThumbnailExposes>

GalleryThumbnailContent#

Props#

Defines valid properties in GalleryThumbnailContent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryThumbnailContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryThumbnailContentInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryThumbnailContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryThumbnailContentInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of GalleryThumbnailContent component.

name	type	default	description
root	GalleryThumbnailContentPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of GalleryThumbnailContent component.

values
ComponentInstance<GalleryThumbnailContentProps, GalleryThumbnailContentState, GalleryThumbnailContentExposes>

GalleryThumbnailItem#

Props#

Defines valid properties in GalleryThumbnailItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: GalleryThumbnailItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: GalleryThumbnailItemInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<GalleryThumbnailItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: GalleryThumbnailItemInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of GalleryThumbnailItem component.

name	type	default	description
root	GalleryThumbnailItemPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of GalleryThumbnailItem component.

values
ComponentInstance<GalleryThumbnailItemProps, GalleryThumbnailItemState, GalleryThumbnailItemExposes>

useGallery#

Types#

Instance

Instance of useGallery headless.

values
HeadlessInstance<useGalleryProps, useGalleryState, useGalleryExposes>