1.0.12 • Published 2 years ago
@frank-mayer/slix v1.0.12
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.