# make-a-spectacle

> A single function for allowing you to write modular Spectacle sections like React, but return the arrays Spectacle wants.

Latest version **0.1.0** (published 2018-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install make-a-spectacle
pnpm add make-a-spectacle
yarn add make-a-spectacle
bun add make-a-spectacle
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2018-04-13 |
| First published | 2018-04-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sean May |
| Maintainers | sean.may |

## Links

- npm: https://www.npmjs.com/package/make-a-spectacle
- Repository: git@github.com:seanmay/make-a-spectacle
- npm.io page: https://npm.io/package/make-a-spectacle

## Recent versions

- 0.1.0 (latest) — 2018-04-13

## README

# make-a-spectacle
A single function for allowing you to write modular Spectacle sections like React, but return the arrays Spectacle wants.

## Installation

**NPM**
```bash
npm install make-a-spectacle
```

**Yarn**
```bash
yarn add make-a-spectacle
```

## Usage

```jsx
// /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>
);
```

```jsx
// /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.

```jsx
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.

---
_Source: https://npm.io/package/make-a-spectacle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._