@frank-mayer/slix NPM

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.

@infinitebrahmanuniverse/nolb-_fra @everything-registry/sub-chunk-340 @zalastax/nolb-_fra

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago