` is a thin wrapper around `useSteps`. The length of its `values` list indicates the number of steps it occupies in the slide step sequence. Each of these values are passed in turn to the render function you provide. Additionally, it allows you to specify styles which should be applied before and after it is activated, and uses `react-spring` to interpolate between the 'active style' and the 'inactive style'.
The render function you provide (either via the `render` prop or as a '`children` function') is called with three arguments:
- The element of the list passed to `values` which corresponds to the current step (or `undefined` if the Stepper is inactive)
- The current step _relative_ to this Stepper's sequence (which will be `-1` if the Stepper is inactive)
- A boolean value (`isActive`) indicating whether the Stepper is active.
For instance, suppose we render a slide like this:
```jsx
Hello, world!
{(value, step, isActive) =>
isActive
? `The first stepper is active. Step: ${step} Value: ${value}`
: `The first stepper is not active. Step: ${step} Value: ${value}`
}
{(value, step, isActive) =>
isActive
? `The second stepper is active. Step: ${step} Value: ${value}`
: `The second stepper is not active. Step: ${step} Value: ${value}`
}
```
The following output will be rendered as you step through the slide:
```html
Hello, world!
The first stepper is not active. Step: -1 Value: undefined
The second stepper is not active. Step: -1 Value: undefined
Hello, world!
The first stepper is active. Step: 0 Value: foo
The second stepper is not active. Step: -1 Value: undefined
Hello, world!
The first stepper is active. Step: 1 Value: bar
The second stepper is not active. Step: -1 Value: undefined
Hello, world!
The first stepper is active. Step: 1 Value: bar
The second stepper is active. Step: 0 Value: baz
Hello, world!
The first stepper is active. Step: 1 Value: bar
The second stepper is active. Step: 0 Value: baz
Hello, world!
The first stepper is active. Step: 1 Value: bar
The second stepper is active. Step: 1 Value: quux
```
### Props
- `id`: _(For debugging and testing purposes only)_ Passed to `useSteps`.
- `priority`: Passed to `useSteps`.
- `render`: Render function (see above.)
- `children`: Render function (see above.)
- `className`: Class name applied to the animated container element.
- `tagName`: Tag which will be used as the animated container element. Defaults to `div`.
- `values`: Values array (see description above).
- `alwaysVisible`: Forces this stepper to always have its active style applied.
- `activeStyle`: Style object applied when this `` is active. Defaults to `{ opacity: 1 }`.
- `inactiveStyle`: Style object applied when this `` is inactive. Defaults to `{ opacity: 0 }`.
## Appear
Appear is a thin wrapper around `useSteps`. It occupies a single step within the slide step sequence. It wraps its child elements in an animated container element, and uses `react-spring` to interpolate between its `activeStyle` and `inactiveStyle`.
### Props
- `id`: _(For debugging and testing purposes only)_ Passed to `useSteps`.
- `priority`: Passed to `useSteps`.
- `children`: Children rendered within this `Appear`.
- `className`: Class name applied to the animated container element.
- `tagName`: Tag which will be used as the animated container element. Defaults to `div`.
- `activeStyle`: Style object applied when this `` is active. Defaults to `{ opacity: 1 }`.
- `inactiveStyle`: Style object applied when this `` is inactive. Defaults to `{ opacity: 0 }`.
## Code Pane
CodePane is a component for showing a syntax-highlighted block of source code. It will scroll for overflow amounts of code, trim whitespace and normalize indents. It will also wrap long lines of code and preserve the indent. CodePane uses the [React Syntax Highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) Component.
The `theme` prop accepts a configurable object or pre-defined theme object from the available [Prism Themes](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/styles/prism/index.js). These themes are conveniently exported from Spectacle as `codePaneThemes`.
Additionally, the `highlightRanges` prop accepts an array that can be used to highlight certain ranges of code:
This array can contain a range of two numbers, where the first number indicates the _start_, and the second number the _end_ of that range, e.g.,
`[1, 3]` will highlight lines 1 through 3.
It can also contain a list of sub-arrays which will be considered as a list of ranges, e.g.,
`[[1, 3], [6, 8], [10, 15]]`.
Array values can even be mixed to include sub-arrays (for multiple lines) and numbers (for single lines), e.g.,
`[[1, 3], 5, [6, 8], [10, 15], 20]`.
_Note that each range will be considered as a step in your current slide's animation. Each range will be highlighted as you move forward or backwards on each step._
| Props | Type | Example | Default Props |
|------------------------------------|-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|----------------------|
| `children` | PropTypes.string | `let name = "Carlos"` | - |
| `highlightRanges` | PropTypes.arrayOf(PropTypes.number) or PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)) | `[1, 3]` or `[[6, 8], [10, 15]]` | - |
| `language` | PropTypes.string | `javascript` | - |
| `theme` | PropTypes.object or | [Prism Theme](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/styles/prism/index.js) | vs-dark Theme Object |
| `showLineNumbers` | PropTypes.bool | `true`, `false` | `true` |
| [**`Layout`**](./props#layout) | | | |
| [**`Position`**](./props#position) | | | |
```jsx
import tomorrow from 'react-syntax-highlighter/dist/cjs/styles/prism/tomorrow';
() => (
{`
const App = () => (
);
`}
);
```
## FullScreen
FullScreen is a button that takes the presentation in and out of the browser's full screen mode. It can have a different color and be re-sized.
| Props | Type | Example |
|------------------------------------|------------------|-----------|
| `size` | PropTypes.number | `23` |
| `color` | PropTypes.string | `#abc123` |
| [**`Position`**](./props#position) | | |
## Image
Image is a component to display a picture within a slide. It is analogous to an `![]()
` tag and conforms to Layout and Position props.
| Props | Type |
|------------------------------------|------------------|
| src | PropTypes.string |
| [**`Layout`**](./props#layout) | |
| [**`Position`**](./props#position) | |
## Markdown Components
The Markdown components let you include a block of Markdown within a slide using ``, author a complete slide with Markdown using ``, or author a series of slides with Markdown using ``. Markdown tags get converted into Spectacle components. The `---` three dash marker when used inside `` is used to divide content into separate slides. Markdown also supports presenter notes using the `Notes:` marker. `` must be a child of `` where `` and `` are children of ``.
| Props | Type | Example |
|------------------------------------|-------------------|-------------------------------------------------------------------------------------|
| `children` | PropTypes.string | `# Hi there` |
| `componentProps` | PropTypes.object | `# I'm purple!` |
| `animateListItems` | PropTypes.boolean | `` |
| [**`Layout`**](./props#layout) | | |
| [**`Position`**](./props#position) | | |
```jsx
# Urql
A highly customizable and versatile GraphQL client
Made by Formidable
# Use Markdown to write a slide
This is a single slide composed using Markdown.
- It uses the `animateListItems` prop so...
- it's list items...
- will animate in, one at a time.
# Markdown Slide Sets
Let you write a sequence of slides using Markdown.
---
# This is the Second Slide in the Set
Using the `---` delimiter creates a new slide in the set.
Notes: The easiest way to always display up-to-date data is to set the requestPolicy to 'cache-and-network'.
```
#### v7 Migration Guide
In prior versions of Spectacle the `` component was used for slides, set and markdown content. As noted above there are now three specific components for each of these use cases.
1. `` remains the same.
2. `` when used for a full slide is now ``.
3. `` is now ``.
## Notes
Notes is a component that only renders in Presenter mode as presenter notes. It is used as the last component inside your slide but does not show on the deck.
| Props | Type | Example |
|------------|------------------|-------------------|
| `children` | PropTypes.string | `Presenter Notes` |
```jsx
Urql
A highly customizable and versatile GraphQL client
Urql is a GraphQL client that exposes a set of React components and hooks.
```
## Progress
Progress is a component with no children that just shows dots for each slide in your deck. The current slide is represented by a filled circle. Visited and future slides are represented by a transparent, outlined circle. The size and color are customizable.
| Props | Type | Example |
|------------------------------------|------------------|-----------|
| `size` | PropTypes.number | `23` |
| `color` | PropTypes.string | `#abc123` |
| [**`Position`**](./props#position) | | |
## AnimatedProgress
AnimatedProgress is similar to the Progress component, with an additional Pacman character that moves when the current slide changes. It looks like the Pacman is eating all of the circles that represent slides up to, and including, the new current slide. The size and color of the circles are customizable, as is the color of the Pacman.
| Props | Type | Example |
|------------------------------------|------------------|-----------|
| `size` | PropTypes.number | `23` |
| `color` | PropTypes.string | `#abc123` |
| `pacmanColor` | PropTypes.string | `#abc123` |
| [**`Position`**](./props#position) | | |
---
### Extensions (`docs/extensions.md`)
---
title: Extensions
order: 9
sidebar_position: 9
---
# Third Party Extensions
In the past, developers across the open-source-iverse have created extensions for use within your Spectacle presentation.
Since the [release of v6](https://github.com/FormidableLabs/spectacle/releases/tag/v6.0.0), the previously developed extensions are no longer compatible with the latest and greatest in Spectacle. We hope that changes soon, and we are happy to support you...
- ... in updating your project if you're one of the folks with a now-deprecated tool.
- ... with PR review and feedback if you're interested in writing a new tool and don't know where to start.
To see a list of the extensions we've listed here in the past, please check out [the archive in git](https://github.com/FormidableLabs/spectacle/blob/3fd0e850ebab65758b1a4db04c8edef5f2cee81e/docs/content/extensions.md).
# Formidable Extensions
There are a few companion projects that Formidable directly maintains.
## spectacle-cli
A collection of tools for serving or generating new presentation decks. Includes `spectacle` and `spectacle-boilerplate`.
For complete documentation of the CLI, please check out [the repository](https://www.github.com/FormidableLabs/spectacle-cli).
## spectacle-mdx-loader
A webpack MDX loader for Spectacle presentations.
Check [the repository](https://github.com/FormidableLabs/spectacle/tree/main/packages/spectacle-mdx-loader) for usage, integration, and more information.
---
### Faq (`docs/faq.md`)
---
title: FAQ
order: 10
sidebar_position: 10
---
# Frequently Asked Questions
## Can I export my slides for use elsewhere?
Yes - you can export your slides in PDF format. Appending your presentation URL with `?exportMode=true` will allow you to export your presentation by flattening out your presentation so that you can Print to PDF directly from your browser. 🎉
If you want a black & white version of your slides printed to PDF, append your URL with `?exportMode=true&printMode=true` to get a printer-friendly, flattened, black & white print out of your slideshow.
For more info about the query parameters Spectacle supports, please check out our section about it in the [presenting controls documentation](./presenting-controls#query-parameters).
## Can I write my presentation in TypeScript?
Yes—Spectacle types are shipped with the package, so you can safely use Spectacle in any `.ts` or `.js` presentation without a separate type definition import. TypeScript is now the default language for Spectacle and the `create-spectacle` CLI, so you can use it without any additional configuration.
---
### Md Slide Layouts (`docs/md-slide-layouts.md`)
---
title: Markdown Slide Layouts
order: 7
sidebar_position: 7
---
# Markdown Slide Layouts
Spectacle supports a number of layout containers for use in your Markdown slides. These containers are designed to enable more complex layouts previously not doable in Markdown without the usage of importing JSX elements into MDX.
Spectacle uses `---` (three dashes) to delimit each slide in a Markdown file. Spectacle adds supports for a JSON-based configuration object with the slide delimiter in your Markdown file. This configuration object is used to define the layout of the slide. Currently, two types of layouts are support are `center` and `columns`.
:::info
Markdown-annotated slide layouts is available only with `.md` files. This feature is not available with `.mdx` files where you can use JSX-based layout primitives.
:::
## Columns Layout
The columns layout is used to create a row-based column layout. The columns layout is defined by the following JSON object:
```json
{ "layout" : "columns" }
```
Each column section is defined by a `::section` delimiter. The number of columns is determined by the number of `::section` annotations.
```md
--- { "layout" : "columns" }
::section
::section
---
# Ghost-type Pokémon
The Ghost-type (ゴーストタイプ Gosuto taipu in Japanese) is one of the eighteen Pokémon elemental types.
```
This layout has the underlying JSX structure and divides each section into an array:
```jsx
{sectionsArray}
```
## Center Layout
The center layout is used to create a single column layout with the content centered. The center layout is defined by the following JSON object:
```json
{ "layout" : "center" }
```
```md
--- { "layout" : "center" }
---
# Gengar
Gengar is a dark purple, bipedal Pokémon with a roundish body. It has red eyes and a wide mouth that is usually curled into a sinister grin. Multiple spikes cover its back, and it has large pointed ears. Its arms and legs are short with three digits on both its hands and feet. It also has a stubby tail.
```
This layout has the underlying JSX structure and passes all the slide content as chidren:
```jsx
{content}
```
---
### Presenting Controls (`docs/presenting-controls.mdx`)
---
title: Presenting Controls
order: 2
sidebar_position: 2
---
import commandBarImage from "../website/static/img/command-bar.png"
# Presenting Controls
Spectacle comes with a few keyboard shortcuts to help you navigate your presentation. These shortcuts are available in both the browser and the Presenter Mode. You can also use the command bar to see all available shortcuts.
## Command Bar
Pressing ⌘/Ctrl + k will open the command bar. This will show you all available keyboard shortcuts and common navigation options.
## Keyboard Controls
| Key Combination | Function |
| --------------- | ---------------------- |
| → | Next Slide |
| ← | Previous Slide |
| ⌥/Alt + ⇧ + O | Toggle Overview Mode |
| ⌥/Alt + ⇧ + P | Toggle Presenter Mode |
| ⌥/Alt + ⇧ + F | Toggle Fullscreen Mode |
## Query Parameters
A handful of query parameters are supported within your Spectacle presentation.
Append your URL with one of the following parameters, like so: `&=true`.
To combine parameters, use multiple `&` to separate the parameters, e.g.: `&exportMode=true&printMode=true`
| Parameter | Description of Use |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `exportMode` | For exporting your presentation as a PDF. Add it to your project URL and "Save to PDF" directly from the browser |
| `printMode` | Turns your slideshow into a printer-friendly, black & white version. Meant for use concurrently with `?exportMode` e.g. `?exportMode=true&printMode=true` |
| `presenterMode` | Displays a Presenter Mode with slide notes, a timer, and the upcoming slide. |
---
### Props (`docs/props.md`)
---
title: Base Props
order: 5
sidebar_position: 5
---
# Base Props
The following are a handful of standard base props many components consume. For a complete list of available components and the props they consume, please see our complete [API Reference](./api-reference.md).
## Transition Object
A transition object defines the animatable CSS properties for three states: `from`, `enter`, and `leave`. From is the starting transition. Enter are the styles applied when the slide is in view. Leave are the styles when the slide goes out of view.
An example transition object looks like:
```javascript
const transition = {
from: {
opacity: 0,
transform: 'rotate(45deg)'
},
enter: {
opacity: 1,
transform: 'rotate(0)'
},
leave: {
opacity: 0,
transform: 'rotate(315deg)'
}
};
```
## Background
**Background** props used by [`Slide`](./api-reference.md#slide).
| Name | PropType | Description | Example |
| -------------------- | ---------------- | ---------------------------- | ------------------------------ |
| `backgroundImage` | PropTypes.string | Set CSS `backgroundImage` | `url('...')` or `require(...)` |
| `backgroundSize` | PropTypes.string | Set CSS `backgroundSize` | `cover` |
| `backgroundPosition` | PropTypes.string | Set CSS `backgroundPosition` | `center` |
| `backgroundRepeat` | PropTypes.string | Set CSS `backgroundRepeat` | `no-repeat` |
## Color
**Color** props are used by [`CodeSpan`](./api-reference.md#typography-tags), [`Text`](./api-reference.md#typography-tags), [`Link`](./api-reference.md#typography-tags), [`Heading`](./api-reference.md#typography-tags), [`Quote`](./api-reference.md#typography-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`UnorderedList`](./api-reference.md#typography-tags), [`OrderedList`](./api-reference.md#typography-tags), and [`ListItem`](./api-reference.md#typography-tags).
| Name | PropType | Description | Example |
| ------------------------- | ---------------- | ------------------------------------------------------- | ------------------------ |
| `color` | PropTypes.string | Set CSS `color` value or `color` theme value | `#abc123` or `primary` |
| `bg` or `backgroundColor` | PropTypes.string | Set CSS `background-color` value or `color` theme value | `#abc123` or `secondary` |
## Space
**Space** props used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`CodeSpan`](./api-reference.md#typography-tags), [`Text`](./api-reference.md#typography-tags), [`Link`](./api-reference.md#typography-tags), [`Heading`](./api-reference.md#typography-tags), [`Quote`](./api-reference.md#typography-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`UnorderedList`](./api-reference.md#typography-tags), [`OrderedList`](./api-reference.md#typography-tags), and [`ListItem`](./api-reference.md#typography-tags).
| Name | PropType | Description | Example |
| ----------------------- | ---------------- | ----------------------------------------------------------------------- | ----------------------------------- |
| `m` or `margin` | PropTypes.string | Set CSS `margin` value or `space` theme value | `24px`, `6px 3px 2px`, or `primary` |
| `mt` or `marginTop` | PropTypes.string | Set CSS `margin-top` value or `space` theme value | `1em` or `tertiary` |
| `mr` or `marginRight` | PropTypes.string | Set CSS `margin-right` value or `space` theme value | `0.5em` or `secondary` |
| `mb` or `marginBottom` | PropTypes.string | Set CSS `margin-bottom` value or `space` theme value | `2px` or `primary` |
| `ml` or `marginLeft` | PropTypes.string | Set CSS `margin-left` value or `space` theme value | `3%` or `secondary` |
| `mx` or `marginX` | PropTypes.string | Set CSS `margin-left` and `margin-right` value or `space` theme value | `1em` or `secondary` |
| `my` or `marginY` | PropTypes.string | Set CSS `margin-top` and `margin-bottom` value or `space` theme value | `5px` or `tertiary` |
| `p` or `padding` | PropTypes.string | Set CSS `padding` value or `space` theme value | `24px`, `6px 3px 2px`, or `primary` |
| `pt` or `paddingTop` | PropTypes.string | Set CSS `padding-top` value or `space` theme value | `1em` or `tertiary` |
| `pr` or `paddingRight` | PropTypes.string | Set CSS `padding-right` value or `space` theme value | `0.5em` or `secondary` |
| `pb` or `paddingBottom` | PropTypes.string | Set CSS `padding-bottom` value or `space` theme value | `2px` or `primary` |
| `pl` or `paddingLeft` | PropTypes.string | Set CSS `padding-left` value or `space` theme value | `3%` or `secondary` |
| `px` or `paddingX` | PropTypes.string | Set CSS `padding-left` and `padding-right` value or `space` theme value | `1em` or `secondary` |
| `py` or `paddingY` | PropTypes.string | Set CSS `padding-top` and `padding-bottom` value or `space` theme value | `5px` or `tertiary` |
## Typography
**Typography** props are used by [`CodeSpan`](./api-reference.md#typography-tags), [`Text`](./api-reference.md#typography-tags), [`Link`](./api-reference.md#typography-tags), [`Heading`](./api-reference.md#typography-tags), [`Quote`](./api-reference.md#typography-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`UnorderedList`](./api-reference.md#typography-tags), [`OrderedList`](./api-reference.md#typography-tags), and [`ListItem`](./api-reference.md#typography-tags).
| Name | PropType | Description | Example |
| --------------- | ---------------- | -------------------------------------------------------------- | ------------------------------------------------------ |
| `fontFamily` | PropTypes.string | Set CSS `font-family` value or `fonts` theme value | `Helvetica` or `primary` |
| `fontSize` | PropTypes.string | Set CSS `font-size` value or `fontSizes` theme value | `16px` or `bodyCopy` |
| `fontWeight` | PropTypes.string | Set CSS `font-weight` value or `fontWeights` theme value | `400`, `bold`, or [`Heading`](./api-reference.md#typography-tags) |
| `lineHeight` | PropTypes.string | Set CSS `line-height` value or `fontWeights` theme value | `1.5em` or `paragraph` |
| `letterSpacing` | PropTypes.string | Set CSS `letter-spacing` value or `letterSpacings` theme value | `1px` or `spreadOutText` |
| `textAlign` | PropTypes.string | Set CSS `text-align` value | `left` |
| `fontStyle` | PropTypes.string | Set CSS `font-style` value | `normal` or `italic` |
## Layout
**Layout** props are used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`CodePane`](./api-reference.md#code-pane), and [`Markdown`](./api-reference.md#markdown-components).
| Name | PropType | Description | Example |
| ----------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `width` | PropTypes.string or PropTypes.number | Set CSS `width` value or `sizes` theme value, fractional numeric values get converted to percents, for example `1/2` becomes `50%`, whole numbers get converted into pixels | `100%`, `1/2`, `30px`, `256`, or `primary` |
| `height` | PropTypes.string or PropTypes.number | Set CSS `height` value or `sizes` theme value, fractional numeric values get converted to percents, for example `1/2` becomes `50%`, whole numbers get converted into pixels | `100%`, `1/2`, `30px`, `256`, or `primary` |
| `minWidth` | PropTypes.string or PropTypes.number | Set CSS `min-width` value or `sizes` theme value, fractional numeric values get converted to percents, for example `1/2` becomes `50%`, whole numbers get converted into pixels | `100%`, `1/2`, `30px`, `256`, or `primary` |
| `maxWidth` | PropTypes.string or PropTypes.number | Set CSS `max-width` value or `sizes` theme value, fractional numeric values get converted to percents, for example `1/2` becomes `50%`, whole numbers get converted into pixels | `100%`, `1/2`, `30px`, `256`, or `primary` |
| `minHeight` | PropTypes.string or PropTypes.number | Set CSS `min-height` value or `sizes` theme value, fractional numeric values get converted to percents, for example `1/2` becomes `50%`, whole numbers get converted into pixels | `100%`, `1/2`, `30px`, `256`, or `primary` |
| `maxHeight` | PropTypes.string or PropTypes.number | Set CSS `max-height` value or `sizes` theme value, fractional numeric values get converted to percents, for example `1/2` becomes `50%`, whole numbers get converted into pixels | `100%`, `1/2`, `30px`, `256`, or `primary` |
| `size` | PropTypes.string or PropTypes.number | Set CSS `width` and `height` value or `sizes` theme value, fractional numeric values get converted to percents, for example `1/2` becomes `50%`, whole numbers get converted into pixels | `100%`, `1/2`, `30px`, `256`, or `primary` |
| `display` | PropTypes.string | Set CSS `display` value | `inline-block` |
| `overflow` | PropTypes.string | Set CSS `overflow` value | `visible` |
| `overflowX` | PropTypes.string | Set CSS `overflow-x` value | `hidden` |
| `overflowY` | PropTypes.string | Set CSS `overflow-y` value | `visible` |
## Flex
**Flex** props are used by [`FlexBox`](./api-reference.md#layout-tags).
| Name | PropType | Description | Example |
| ---------------- | ------------------------------------ | ------------------------------- | --------------- |
| `alignItems` | PropTypes.string | Set CSS `align-items` value | `flex-start` |
| `alignContent` | PropTypes.string | Set CSS `align-content` value | `center` |
| `justifyContent` | PropTypes.string | Set CSS `justify-content` value | `space-between` |
| `flexWrap` | PropTypes.string | Set CSS `flex-wrap` value | `wrap` |
| `flexBasis` | PropTypes.string or PropTypes.number | Set CSS `flex-basis` value | `auto` or `1` |
| `flexDirection` | PropTypes.string | Set CSS `flex-direction` value | `column` |
| `flex` | PropTypes.string | Set CSS `flex` value | `1 1 auto` |
| `justifySelf` | PropTypes.string | Set CSS `justify-self` value | `stretch` |
| `alignSelf` | PropTypes.string | Set CSS `align-self` value | `center` |
| `order` | PropTypes.number | Set CSS `order` value | `1` |
## Grid
**Grid** props are used by [`Grid`](./api-reference.md#layout-tags).
| Name | PropType | Description | Example |
| --------------------- | ------------------------------------ | ------------------------------------- | --------------------------------------------- |
| `gridGap` | PropTypes.number | Set CSS `grid-gap` value | `15` |
| `gridColumnGap` | PropTypes.number | Set CSS `grid-column-gap` value | `3` |
| `gridRowGap` | PropTypes.number | Set CSS `grid-row-gap` value | `6` |
| `gridColumn` | PropTypes.number or PropTypes.string | Set CSS `grid-column` value | `auto`, `1 / 2`, or `3` |
| `gridRow` | PropTypes.number or PropTypes.string | Set CSS `grid-row` value | `auto`, `1 / 2`, or `3` |
| `gridAutoFlow` | PropTypes.string | Set CSS `grid-auto-flow` value | `row` or `column-dense` |
| `gridAutoColumns` | PropTypes.string | Set CSS `grid-auto-columns` value | `min-content`, `1fr`, or `minmax(10px, auto)` |
| `gridAutoRows` | PropTypes.string | Set CSS `grid-auto-rows` value | `min-content`, `1fr`, or `minmax(10px, auto)` |
| `gridTemplateColumns` | PropTypes.string | Set CSS `grid-template-columns` value | `60px 60px` or `1fr 2fr` |
| `gridTemplateRows` | PropTypes.string | Set CSS `grid-template-rows` value | `40px 1fr` or `8ch auto` |
| `gridTemplateAreas` | PropTypes.string | Set CSS `grid-template-area` value | `a b` or `inherit` |
| `gridArea` | PropTypes.string | Set CSS `grid-area` value | `a` or `2 / 1 / 4` |
## Position
**Position** props are used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`CodePane`](./api-reference.md#typography-tags), [`FullScreen`](./api-reference.md#fullscreen), [`Progress`](./api-reference.md#progress), [`AnimatedProgress`](./api-reference.md#animatedprogress), and [`Markdown`](./api-reference.md#markdown-components).
| Name | PropType | Description | Example |
| ---------- | ---------------- | ------------------------ | ---------- |
| `position` | PropTypes.string | Set CSS `position` value | `relative` |
| `zIndex` | PropTypes.number | Set CSS `z-index` value | `2` |
| `top` | PropTypes.number | Set CSS `top` value | `1` |
| `right` | PropTypes.number | Set CSS `right` value | `3` |
| `bottom` | PropTypes.number | Set CSS `bottom` value | `10` |
| `left` | PropTypes.number | Set CSS `left` value | `5` |
## Border
**Border** props are used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), and [`TableCell`](./api-reference.md#table-tags).
| Name | PropType | Description | Example |
| ------------------------- | ------------------------------------ | ---------------------------------------------- | -------------------- |
| `border` | PropTypes.string | Set CSS `position` value | `2px solid white` |
| `borderWidth` | PropTypes.number or PropTypes.string | Set CSS `border-width` value | `5px` |
| `borderStyle` | PropTypes.string | Set CSS `border-style` value | `solid` |
| `borderColor` | PropTypes.string | Set CSS `border-color` value | `rgb(255, 200, 150)` |
| `borderRadius` | PropTypes.number or PropTypes.string | Set CSS `border-radius` value | `10` |
| `borderTop` | PropTypes.string | Set CSS `border-top` value | `3px dashed #000` |
| `borderTopWidth` | PropTypes.number or PropTypes.string | Set CSS `border-top-width` value | `1` |
| `borderTopStyle` | PropTypes.string | Set CSS `border-top-style` value | `solid` |
| `borderTopColor` | PropTypes.string | Set CSS `border-top-color` value | `#ff0abc` |
| `borderTopLeftRadius` | PropTypes.number or PropTypes.string | Set CSS `border-top-left-radius` value | `20%` |
| `borderTopRightRadius` | PropTypes.number or PropTypes.string | Set CSS `border-top-right-radius` value | `4px` |
| `borderRight` | PropTypes.string | Set CSS `border-right` value | `relative` |
| `borderRightWidth` | PropTypes.number or PropTypes.string | Set CSS `border-right-width` value | `1px` |
| `borderRightStyle` | PropTypes.string | Set CSS `border-right-style` value | `solid` |
| `borderRightColor` | PropTypes.string | Set CSS `border-right-color` value | `red` |
| `borderBottom` | PropTypes.string | Set CSS `border-bottom` value | `2px solid blue` |
| `borderBottomWidth` | PropTypes.number or PropTypes.string | Set CSS `border-bottom-width` value | `1em` |
| `borderBottomStyle` | PropTypes.string | Set CSS `border-bottom-style` value | `dashed` |
| `borderBottomColor` | PropTypes.string | Set CSS `border-bottom-color` value | `orange` |
| `borderBottomLeftRadius` | PropTypes.number or PropTypes.string | Set CSS `border-bottom-left-radius` value | `2px` |
| `borderBottomRightRadius` | PropTypes.number or PropTypes.string | Set CSS `border-bottom-right-radius` value | `4px` |
| `borderLeft` | PropTypes.string | Set CSS `border-left` value | `1px solid green` |
| `borderLeftWidth` | PropTypes.number or PropTypes.string | Set CSS `border-left-width` value | `2px` |
| `borderLeftStyle` | PropTypes.string | Set CSS `border-left-style` value | `solid` |
| `borderLeftColor` | PropTypes.string | Set CSS `border-left-color` value | `green` |
| `borderX` | PropTypes.string | Set CSS `border-left` and `border-right` value | `2px dotted red` |
| `borderY` | PropTypes.string | Set CSS `border-top` and `border-bottom` value | `1px solid black` |
---
### React Slide Layouts (`docs/react-slide-layouts.md`)
---
title: React Slide Layouts
order: 6
sidebar_position: 6
---
import Full from '../website/static/img/slide-layouts/full.png';
## SlideLayout
`SlideLayout` is a set of helper components used to create slides from a set of pre-defined layouts, so you can avoid dealing with things like layout primitives.
### `SlideLayout.Full`
A full-slide layout
| Props | Type | Example |
|-----------------|--------------------------------------|---------|
| `...slideProps` | [Slide Props](./api-reference#slide) | |
### `SlideLayout.Center`
A layout with centered content
| Props | Type | Example |
|-----------------|--------------------------------------|---------|
| `...slideProps` | [Slide Props](./api-reference#slide) | |
### `SlideLayout.TwoColumn`
A layout with two columns
| Props | Type | Example |
|-----------------|--------------------------------------|----------------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | |
| `left` | `ReactNode` | `Left` |
| `right` | `ReactNode` | `Right` |
### `SlideLayout.List`
A layout with a list and an optional title
| Props | Type | Required | Example |
|--------------------|--------------------------------------------------|----------|---------------------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `items` | `ReactNode[]` | ✅ | `['Hello', World]` |
| `title` | `string` | ❌ | `My list slide` |
| `titleProps` | [Heading Props](./api-reference#typography-tags) | ❌ | `{ color: 'red' }` |
| `animateListItems` | `boolean` | ❌ | `true` |
| `listProps` | [List Props](./api-reference#typography-tags) | ❌ | `{ backgroundColor: 'purple' }` |
### `SlideLayout.Section`
A layout with a section title
| Props | Type | Required | Example |
|-----------------|-----------------------------------------------|----------|----------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `sectionProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` |
### `SlideLayout.Statement`
A layout with a centered statement
| Props | Type | Required | Example |
|------------------|-----------------------------------------------|----------|----------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `statementProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` |
### `SlideLayout.BigFact`
A layout to present a fact in large font
| Props | Type | Required | Example | Default |
|------------------------|-----------------------------------------------|----------|-----------------------|---------|
| `children` | `ReactNode` | ✅ | `100%` | |
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | | |
| `factInformation` | `ReactNode` | ❌ | `Fact information` | |
| `factProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "100px" }` | |
| `factInformationProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` | |
| `factFontSize` | `string` | ❌ | `150px` | `250px` |
### `SlideLayout.Quote`
A quote and attribution layout
| Props | Type | Required | Example |
|--------------------|-----------------------------------------------|----------|-----------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `children` | `ReactNode` | ✅ | `To be, or not to be` |
| `attribution` | `ReactNode` | ✅ | `William Shakespeare` |
| `quoteProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "100px" }` |
| `attributionProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` |
### `SlideLayout.Code`
A layout with a single code pane and an optional title
| Props | Type | Required | Example |
|-----------------|--------------------------------------------------|----------|------------------------------------------------------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `children` | `string` | ✅ | `const Component = (props: componentProps): JSX.Element = {...}` |
| `language` | `boolean` | ✅ | `false` |
| `title` | `string` | ❌ | `Show me the code!` |
| `titleProps` | [Heading Props](./api-reference#typography-tags) | ❌ | `{ color: 'red' }` |
| `codePaneProps` | `CodePaneProps` | ❌ | |
### `SlideLayout.MultiCodeLayout`
A layout with more than one code block: multiple code panes with optional descriptions, and an optional slide title.
| Props | Type | Required | Example |
|-----------------|--------------------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `codeBlocks` | `CodeBlock[]` | ✅ | `[{ code: 'console.log("hello world!")', language: 'jsx', description: 'Say hello', codePaneProps: {...} }, {...}]` |
| `title` | `string` | ❌ | `Show me the code!` |
| `titleProps` | [Heading Props](./api-reference#typography-tags) | ❌ | `{ color: 'red' }` |
| `numColumns` | `number` | ❌ | `{2}` |
where
```ts
type CodeBlock = Omit & {
code: CodePaneProps['children'];
description?: string | ReactNode;
descriptionProps?: ComponentProps;
}
```
### `SlideLayout.HorizontalImage`
A layout with one image per slide: a horizontal/landscape image and an optional title or description.
| Props | Type | Required | Example |
|---------------------|-----------------------------------------------|----------|---------------------------------------------------------------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `src` | `string` | ✅ | `https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg` |
| `alt` | `string` | ✅ | `Fred the dog looking at the camera` |
| `imgProps` | `ImgHTMLAttributes` | ❌ | `{ style: { objectFit: 'contain' } }` |
| `imgContainerProps` | `ComponentProps` | ❌ | `{ style: { border: '8px solid white' } }` |
| `title` | `string \| ReactNode` | ❌ | `Fred is a 100% pure bred good boy!` |
| `titleProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ color: 'red' }` |
| `description` | `string \| ReactNode` | ❌ | `and we love him` |
| `descriptionProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ color: 'white' }` |
| `objectFit` | `React.CSSProperties['objectFit']` | ❌ | `cover` |
### `SlideLayout.VerticalImage`
A layout with one image per slide: a vertical/portrait image with a bulleted list and an optional title.
| Props | Type | Required | Example |
|---------------------|-------------------------------------------------------------|----------|---------------------------------------------------------------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `src` | `string` | ✅ | `https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg` |
| `alt` | `string` | ✅ | `Fred the dog looking at the camera` |
| `imgProps` | `ImgHTMLAttributes` | ❌ | `{ style: { objectFit: 'contain' } }` |
| `imgContainerProps` | `ComponentProps` | ❌ | `{ style: { border: '8px solid white' } }` |
| `position` | `right` \| `left` | ❌ | `right` |
| `title` | `string \| ReactNode` | ❌ | `Fred is a 100% pure bred good boy!` |
| `titleProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ color: 'red' }` |
| `listItems` | `ReactNode[]` | ❌ | `['brown hair', 'brown eyes', 'happy boy']` |
| `animateListItems` | `boolean` | ❌ | `true` |
| `listType` | `ordered` \| `unordered` | ❌ | `unordered` |
| `listProps` | `ComponentProps` | ❌ | `{ color: 'white' }` |
| `objectFit` | `React.CSSProperties['objectFit']` | ❌ | `cover` |
### `SlideLayout.ThreeUpImage`
A layout with three images per slide: a primary, a top and bottom images.
| Props | Type | Required | Example |
|-----------------|-------------------------------------------------|----------|--------------------------------------------------------------------------------------------------------------------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `primary` | `ImagePane & { position?: 'right' \| 'left'; }` | ✅ | `{src: 'https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg', alt: 'Fred the dog looking at the camera' }` |
| `top` | `ImagePane` | ✅ | `{src: 'https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg', alt: 'Fred the dog looking at the camera' }` |
| `bottom` | `ImagePane` | ✅ | `{src: 'https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg', alt: 'Fred the dog looking at the camera' }` |
where
```ts
type ImagePane = {
src: string;
alt: string;
imgProps?: React.ImgHTMLAttributes;
imgContainerProps?: ComponentProps;
objectFit?: React.CSSProperties['objectFit'];
}
```
### `SlideLayout.FullBleedImage`
A layout with an image that covers the entire slide.
| Props | Type | Required | Example |
|---------------------|---------------------------------------|----------|---------------------------------------------------------------------------|
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
| `src` | `string` | ✅ | `https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg` |
| `alt` | `string` | ✅ | `Fred the dog looking at the camera` |
| `imgProps` | `ImgHTMLAttributes` | ❌ | `{ style: { objectFit: 'contain' } }` |
| `imgContainerProps` | `ComponentProps` | ❌ | `{ style: { border: '8px solid white' } }` |
| `objectFit` | `React.CSSProperties['objectFit']` | ❌ | `cover` |
---
### Themes (`docs/themes.md`)
---
title: Themes
order: 8
sidebar_position: 8
---
# Theme System
Spectacle has a robust theme system that is built upon styled system.
A theme is a 2-level deep object of labeled theme keys and CSS property object values, which is passed directly to the `Deck` component.
## Theme Object
The following is an example of a simple custom theme object:
```js
const theme = {
colors: {
primary: '#f00',
secondary: '#00f'
},
fontSizes: {
header: '64px',
paragraph: '28px'
}
};
```
## Usage
Components in Spectacle can accept either a value label such as `primary` or a raw CSS value like `#f00`.
The label `primary` returns `#f00` since the `backgroundColor` prop (CSS property `background-color`) is mapped to the `colors` theme key.
```jsx
```
## Theme Keys
Common CSS properties are divided into theme keys, which you can override in your custom theme object:
| Theme Key | CSS Properties |
| ---------------- | ----------------------------------------------------------------------- |
| `space` | `margin`, `padding`, `grid-gap` |
| `colors` | `color`, `background-color`, `border-color` |
| `sizes` | `width`, `height`, `min-width`, `max-width`, `min-height`, `max-height` |
| `fontSizes` | `font-size` |
| `borders` | `border`, `border-top`, `border-right`, `border-bottom`, `border-left` |
| `borderWidths` | `border-width` |
| `borderStyles` | `border-style` |
| `radii` | `border-radius` |
| `fonts` | `font-family` |
| `fontWeights` | `font-weight` |
| `lineHeights` | `line-height` |
| `letterSpacings` | `letter-spacing` |
| `shadows` | `box-shadow`, `text-shadow` |
| `zIndices` | `z-index` |
Additionally, there are keys for assorted overrides for the presentation:
| Theme Key | Type | Description |
| ---------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `backdropStyle` | `React.CSSProperties` | Set styles for the backdrop (the edge-to-edge area behind the slides) similar to React `style` props, e.g., `{ backgroundColor: '#FFF' }`. Defaults to `{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh' }` |
| `Backdrop` | `React.ElementType` | Replace the default backdrop component (which appears behind the slides) with a completely custom component or tag name, e.g., `'main'` or `MyCustomComponent`. Defaults to `'div'`. |
## Deck Templates
A template in Spectacle is a fixed overlay of components that are presented on every slide. They are similar to masters in Keynote or PowerPoint. It’s a function prop that has a single optional config object containing the current slide and total slide count and returns a React Node.
```jsx
(
Slide {slideNumber} of {numberOfSlides}
)}>
```
## Scaled Spacing
The `space` key is used as a scale for margins, paddings, and gaps for grids. It is an array of integer values. This allows for a more consistent scale of sizes throughout your presentation. The default theme uses three values on the scale, `16`, `24`, and `32`.
Given the following theme:
```jsx
let theme = {
space: [16, 24, 32]
};
```
One can use a scale value by passing the index of the value as a numeric prop to any space theme property (such as `padding` or `margin`), like so:
```jsx
Hello World
```
### Default Margin Assignments
Spectacle components use different values on the space scale as defaults for margins. The values can be overridden in your theme by providing alternative values as part of a space array that is at least 3 values deep. If no value is provided, Spectacle will default to `0`. Individual margin values can be also provided as `margin` props to the component.
| Component | Default Space Index | Default Theme Value |
| --------------- | ------------------- | ------------------- |
| `Slide` | `2` | `32px` |
| `Heading` | `1` | `24px` |
| `Text` | `0` | `16px` |
| `OrderedList` | `0` | `16px` |
| `UnorderedList` | `0` | `16px` |
| `ListItem` | `0` | `16px` |
| `Link` | `0` | `16px` |
| `Quote` | `0` | `16px` |
| `CodeSpan` | `0` | `16px` |
---
--- METRICS ---
- Files Extracted: 10
- Estimated Token Budget: ~21290 tokens
- Canonical Reference: https://codewiki.google/github.com/FormidableLabs/spectacle
