make-a-spectacle v0.1.0
make-a-spectacle
A single function for allowing you to write modular Spectacle sections like React, but return the arrays Spectacle wants.
Installation
NPM
npm install make-a-spectacle
Yarn
yarn add make-a-spectacle
Usage
// /src/presentation-sections/some-section.jsx
import React from "react";
import { Slide } from "spectacle";
import makeASpectacle from "make-a-spectacle";
export default makeASpectacle(
<div section="some-section">
<Slide>slide 1</Slide>
<Slide>slide 2</Slide>
<Slide>slide 3</Slide>
</div>
);
// /src/presentation.js
import React from "react";
import { Deck } from "spectacle";
/* import ... */
import {
SomeSection,
OtherSection,
} from "presentation-sections";
<Deck>
{SomeSection}
{OtherSection}
</Deck>
Keys
Each slide will be given a suitable key. If the section
key is added to the wrapping element, the section name will be added to the element key (to allow for concatenation of arrays of slide sections).
Wrapping Element
The wrapping element is just there to prevent the pain of remembering to add a comma after each slide in an array.
Spectacle has a SlideSet
element, which I would avoid (for now), as it throws errors if a section has only one Slide
in it (due to React being inconsistent with element.props.children
).
React.Fragment
is another option, but it throws errors if you add any properties to it, aside from key
.
If you would like to use React.Fragment
, the function has a second parameter (defaults to el.prop.section || ""
) for the section name.
export default makeASpectacle(
<React.Fragment>
<Slide>slide 1</Slide>
<Slide>slide 2</Slide>
<Slide>slide 3</Slide>
</React.Fragment>
, "other-section"
);
Keep in mind: for Spectacle to work, there must be a minimum of 2 slides as children.
6 years ago