` 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) | | |