react-dia 📽️

A headless content slider.

• react-dia 📽️
  • Anatomy
  • Typed data
  • Reference
    • Trigger
    • Slide
    • Content
    • Close / Previous / Next
    • ActiveSlide
    • Slides
    • ContentPortal
  • Family components
    • Carousel
    • Transform
    • Share

Anatomy

Import all components as Dia

import { Dia } from "react-dia"

export default () => (
  <Dia.Root>
    <Dia.Trigger data />
    <Dia.Slide data />

    <Dia.Portal>
      <Dia.Overlay />
      <Dia.Content>
        <Dia.Close />
        <Dia.ActiveSlide />
        <Dia.Previous />
        <Dia.Next />
        <Dia.ContentPortal />

        <Dia.Slides>{slide => ...}</Dia.Slides>
        <Dia.ActiveSlide>{slide => ...}</Dia.ActiveSlide>
      </Dia.Content>
    </Dia.Portal>
  </Dia.Root>
);

Typed data

The WithData type, prepares all Dia components with your data types.

import { Dia as ReactDia, WithData } from "react-dia"

const Dia = ReactDia as WithData<
 | { type: "image", ... }
 | { type: "video" , ... }
>

// ...

<Dia.Slides>{(data) => data.type /* "image" | "video" */ }</Dia.Slides>

Reference

Trigger

The button that opens the dialog.

Prop	Type	Default	Description
data	object	undefined	Optional slide data.
asChild	boolean	false	Change the default rendered element for the one passed as a child.

Slide

Registers a slide using data.

Prop	Type	Default	Description
data	object	undefined	Slide data.

Content

Contains the main content to be rendered.

Prop	Type	Default	Description
trapFocus	boolean	true	Whether the component should trap focus or not.
scrollLock	boolean	true	Whether the component should scroll lock outside.

Close / Previous / Next

Action buttons.

Prop	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child.

ActiveSlide

Component with a child callback being passed slide data.

Prop	Type	Default	Description
children	(data: SlideData) ⇒ React.ReactNode	undefined	A callback to render slide data as children.

Slides

Component with a child callback mapping all slides.

Prop	Type	Default	Description
children	(data: SlideData) ⇒ React.ReactNode	undefined	A callback to render all slides as children.

ContentPortal

Portal rendering children directly in Dia content.

Family components

Ready-made implementations for additional functionality

Carousel

Carousel component using embla-carousel-react

import { Dia, DiaCarousel } from 'react-dia'

export default () => (
  <DiaCarousel.Root>
    <DiaCarousel.Slides>
      <Dia.Slides>
        {data => <DiaCarousel.Slide>{/* Slide content ... */}</DiaCarousel.Slide>}
      </Dia.Slides>
    </DiaCarousel.Slides>
  </DiaCarousel.Root>
)

Transform

Zoom Pan Pinch component using react-zoom-pan-pinch

import { Dia, DiaTransform } from 'react-dia'

export default () => (
  <DiaTransform.Root>
    <DiaTransform.Content minScale maxScale>
      <img className='max-w-full max-h-full w-auto h-auto' />
    </DiaTransform.Content>

    <DiaTransform.Controls>
      <Dia.ContentPortal>
        <SlideControls />
      </Dia.ContentPortal>
    </DiaTransform.Controls>
  </DiaTransform.Root>
)

Share

Web Share API trigger. Will not render on firefox since not supported.

import { Share } from "react-dia"

export default () => (
  <Dia.ActiveSlide>
    {data => (
      <Share asChild shareData={{ title: data.alt, ... }}>
        <button>Share</button>
      </Share>
    )}
  </Dia.ActiveSlide>
)