Shared

The Shared component is just a component that will be visible among all Slide components.

Component API

Prop	Required?	Description	Default Value
sx	false	Styles applied to this component.	N/A

Examples

import { Astonish, FadeInTransition, Preview, Shared, 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>
      ))}

      <Shared
        sx={{
          background: "black",
          color: "white",
          width: 200,
          height: 200,
          zIndex: "100 !important",
        }}
      >
        I will be shared among all slides!
      </Shared>

      <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",
};