Astonish NPM | npm.io

Astonish: The React presentations library 🎉

Create presentations using ReactJS and your creative developer mind.

User friendly, easy to use 🍰
Fully customizable 🦋
Built-in theme support 💅🏼
The full power of the web inside your presentation 💪
Built-in Preview component 🖌️
Built-in ArrowControls 🎮
Built-in FullScreen with Focus ⛶
Pre-built arrow keys support ⌨
Everything is Optional and Tree Shakable 🌴

Screenshot

Getting started

To get started in the fastest way possible, use the cli tool create-astonish-presentation

Create a starter presentation with typescript and yarn

    npx create-astonish-presentation my-presentation --typescript --yarn

Create a demo presentation

    npx create-astonish-presentation my-presentation --template demo

Usage

Wrap your presentation with the Astonish component
Wrap each Slide with the Slide component, pay attention that the Slide component must be directly under Astonish
Optionally use built-in components like Preview, ArrowControls, FullScreen, and SlideNumber
If you want to add a component shared between all other slides, use Shared component

import {
  ArrowControls,
  Astonish,
  FullScreen,
  Preview,
  Shared,
  Slide,
  SlideNumber,
} from "astonish";

function Presentation() {
  return (
    <Astonish
      slideSx={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        fontSize: "28px",
        fontFamily: "Arial, Helvetica, Ubuntu, sans-serif",
      }}
    >
        <Slide>
            First Slide!
        </Slide>

        <Slide>
            Astonish is cool 😎
        </Slide>

        <Shared sx={{ fontSize: "24px", color: "slategray", margin: 2 }}>
            I will be visible in all slides
        </Shared>
        
        <SlideNumber />
        <Preview />
        <ArrowControls />
        <FullScreen />
    </Astonish>
  );
}

export default Presentation;