Slides

Unfinished

Slides component is inspired by Slidev and other Markdown-based slides tools. Our goal is to create a headless slides component that can convert MDX and JSX in it into React components at runtime or build time, easy to write animations, and integrate UVCanvas backgrounds seamlessly.

Introducing UVSlides

Advanced MDX Slides Component

Latent Cat

Interactions

  • Press the slides element to focus.
  • Press the left and right keys to switch between pages and animation steps.
  • Press the f key or double-click the slides to toggle fullscreen.

Usage

  1. Compile or evaluate the MDX file

Raw String

# Page { props.currentPage + 1 }

Test

<Demo />

<Background className="opacity-70">
  <Tranquiluxe />
</Background>

---

export const metadata = {
  step: 3,
}

# Page { props.currentPage + 1 } Step { props.currentStep + 1 }

Some Text...

<TestAnimation step={props.currentStep} />

<Background className="opacity-60">
  <Novatrix />
</Background>

---

...

import { sliceMdxString } from "uvcanvas";

const mdxContents = sliceMdxString(mdxString)
  1. Add the <Slides /> component
import "uvcanvas/dist/components/slides/default_components/styles.css"
import {
  Lumiflex,
  Zenitho,
  Novatrix,
  Velustro,
  Tranquiluxe,
  Opulento,
  Slides,
  defaultComponents
} from "uvcanvas";

<Slides
  mdx={mdxContents}
  components={{
    ...defaultComponents, // including h1, p, etc.
    Lumiflex,
    Zenitho,
    Novatrix,
    Velustro,
    Tranquiluxe,
    Opulento,
    TestAnimation, // page 2
  }}
>
  1. Add controls
<Slides {...}>
  <SlidesActionButton
    variant="left"
    className="..."
  >
    <ArrowLeftIcon className="..."/>
  </SlidesActionButton>
  <SlidesActionButton
    variant="right"
    className="..."
  >
    <ArrowRightIcon className=""/>
  </SlidesActionButton>
</Slides>