slix
React powered Slides Framework
Demo
Installation
npm install @frank-mayer/slix react react-dom framer-motionUse 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
slixfunction 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
resetCssfunction 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.