@frank-mayer/slix

v1.0.12

Published

2 years ago

React powered Slides Framework

Downloads

0High
0Medium
0Low

frank-mayer

slix

React powered Slides Framework

Demo

Installation

npm install @frank-mayer/slix react react-dom framer-motion

Use a bundler like parcel or webpack to bundle your code.

Usage

Create a index.html file without any content in its body.
Link your index.tsx file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <script src="index.tsx" type="module"></script>
  </body>
</html>

Call the slix function with the slides you want to be rendered. This function returns a Promise to the Slix instance, which you can use to control the slides. The Promise resolves when the first slide is rendered.
Add a controller to the slix instance, this includes basic navigation features. You can add multiple controllers to a Slix instance. Base class is BaseController, you can extend it to create your own controller.
You can use the included style reset by calling the resetCss function if you want to.

import { slix, resetCss, ArrowController, Slide } from "@frank-mayer/slix";

slix({
  slides: new Map([
    [
      1,
      <Slide>
        <h1>Slide 1</h1>
      </Slide>,
    ],
    [
      2,
      <Slide>
        <h1>Slide 2</h1>
      </Slide>,
    ],
    [
      3,
      <Slide>
        <h1>Slide 3</h1>
      </Slide>,
    ],
    [
      4,
      <Slide>
        <h1>Slide 4</h1>
      </Slide>,
    ],
  ]),
  initialSlide: 1,
}).then((slixInstance) => {
  ArrowController.attach(slixInstance);
});

resetCss();

Dependencies

React
Framer Motion for animations and transitions

Recommended Libraries

howler to play audio

Controllers

ArrowController

| Key | Action | | --- | -------------- | | → | Next slide | | ← | Previous slide |

PowerPointController

| Key | Action | | ------- | -------------- | | → | Next slide | | Space | Next slide | | ← | Previous slide |

Keyboard controls

| Key | Action | | --- | ------------------ | | . | Open control panel | | f | Start fullscreen |

State

If you open the control panel, the new window has a new React instance and therefore a new state. This means that the state of the control panel is not the same as the state of the main window.

To sync the state, you can use the useState hook from Slix. This hook needs a key to identify which state you want to sync. The hook returns a object with a property value.