Preview

Using the Preview component, you will get a preview list of all of your slides inside Astonish

Component API

Prop	Required?	Description	Default Value
name	false	The name displayed on the top of the component pane.	"Preview"
sx	false	Styles applied to this component.	N/A
paneSx	false	Styles applied to the preview pane component.	N/A
slideSx	false	Styles applied to preview slides insides the list.	N/A
renderSlidePreview	false	Allows you to make the construct the slides list by yourself, to get the most customization possible :)	N/A
draggable	false	If true, a drag-handle will be added to the preview pane and the component can be dragged to different positions	false
defaultPosition	false	The initial position of the preview component, possible values are left, right, top, and bottom. In case this component is draggable, the user can change this component position in real time.	"left"

Examples

With default props

import { Astonish, FadeInTransition, Preview, Slide } from "astonish";

function Presentation() {
  return (
    <Astonish defaultSlideTransition={FadeInTransition} slideSx={SlideStyles}>
      {[...Array(colors.length).keys()].map((number) => (
        <Slide
          key={`slide-${number}`}
          sx={{
            background: colors[number],
          }}
        >
          Astonish is cool 😎
        </Slide>
      ))}
      <Preview />
    </Astonish>
  );
}

export default Presentation;

const colors = [
  "hotpink",
  "deeppink",
  "slateblue",
  "royalblue",
  "blueviolet",
  "aquamarine",
  "crimson",
  "palegreen",
];

const SlideStyles = {
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  fontSize: "24px",
  fontFamily: "Arial, Helvetica, Ubuntu, sans-serif",
};

Result:

Draggable pane

import { Astonish, FadeInTransition, Preview, Slide } from "astonish";

function Presentation() {
  return (
    <Astonish defaultSlideTransition={FadeInTransition} slideSx={SlideStyles}>
      {[...Array(colors.length).keys()].map((number) => (
        <Slide
          key={`slide-${number}`}
          sx={{
            background: colors[number],
          }}
        >
          Astonish is cool 😎
        </Slide>
      ))}

      <Preview draggable />
    </Astonish>
  );
}

export default Presentation;

const colors = [
  "hotpink",
  "deeppink",
  "slateblue",
  "royalblue",
  "blueviolet",
  "aquamarine",
  "crimson",
  "palegreen",
];

const SlideStyles = {
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  fontSize: "24px",
  fontFamily: "Arial, Helvetica, Ubuntu, sans-serif",
};

Result: