2020-01-22 08:59:36 -07:00
---
title: API Reference
2023-02-27 10:00:27 -06:00
order: 4
sidebar_position: 4
2020-01-22 08:59:36 -07:00
---
# API Reference
2020-04-21 14:01:34 -06:00
In Spectacle, presentations are composed of a set of base tags. We can separate these into three categories: [Main tags ](#main-tags ), [Typography tags ](#typography-tags ) & [Layout tags ](#layout-tags ).
2020-01-22 08:59:36 -07:00
## Main Tags
These are the bare bones of a Spectacle presentation, the two most essential tags you'll need to assemble a slideshow.
### Deck
2020-04-21 14:01:34 -06:00
Wraps the entire presentation and carries most of the overarching slide logic, like `theme` and `template` context.
2021-03-11 08:30:11 -06:00
A `template` contains Layout tags (referred to as a template render function) and is supplied to the `Deck` component to apply to all subsequent `Slide` s. The last three props are for print and export mode only, they have no effect on the audience or presenter views. The `pageSize` and `pageOrientation` props correspond to the size and orientation values for the [CSS media print size selector ](https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size ). The `pageSize` is automatically set based on the deck theme slide size for a best-fit using export to PDF mode. If you need to print your deck, supply your paper size using the `pageSize` prop. The `printScale` is the ratio for the selected page size, orientation, and slide size. `0.958` is the best ratio for to ensure the PDF export fits the slide theme size. Currently, only Chrome and Chromium-based browsers fully implement the custom page size CSS media print specification. Other browsers such as Firefox and Safari can still export to PDF but the page size will not be a best fit.
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
2021-05-05 14:53:10 -05:00
| Props | Type | Default |
2023-02-24 19:46:12 -08:00
|--------------------|---------------------------------------------|--------------------|
| `theme` | [Styled-system theme object ](./themes ) | |
2023-05-08 11:44:34 -05:00
| `template` | [Templates ](#templates ) | |
2021-05-05 14:53:10 -05:00
| `pageSize` | PropTypes.string | `"13.66in 7.68in"` |
| `pageOrientation` | `"landscape"` or `"portrait"` | `"landscape"` |
| `printScale` | PropTypes.number | `0.959` |
| `autoPlay` | PropTypes.bool | `false` |
| `autoPlayLoop` | PropTypes.bool | `false` |
| `autoPlayInterval` | PropTypes.number (milliseconds) | `1000` |
2023-02-24 19:46:12 -08:00
| `transition` | [**Transition** ](./props#transition-object ) | `slideTransition` |
2022-04-27 23:54:21 +03:00
| `backgroundImage` | PropTypes.string | |
2020-01-22 08:59:36 -07:00
### Slide
2020-03-02 12:18:05 -05:00
Wraps a single slide within your presentation; identifies what is contained to a single view. If a transition effect is applied to this slide, it will override the Deck-specified transition.
2023-02-24 19:46:12 -08:00
| Props | Type |
|----------------------|---------------------------------------------|
| `backgroundColor` | PropTypes.string |
| `backgroundImage` | PropTypes.string |
| `backgroundOpacity` | PropTypes.number |
| `backgroundPosition` | PropTypes.string |
| `backgroundRepeat` | PropTypes.string |
| `backgroundSize` | PropTypes.string |
| `scaleRatio` | PropTypes.number |
| `slideNum` | PropTypes.number |
| `template` | PropTypes.func |
| `textColor` | PropTypes.string |
| `transition` | [**Transition** ](./props#transition-object ) |
2020-01-22 08:59:36 -07:00
2020-01-22 16:22:15 -06:00
## Typography Tags
2020-01-22 08:59:36 -07:00
2020-01-22 16:22:15 -06:00
These tags are for displaying textual content.
2020-01-22 08:59:36 -07:00
2023-02-24 19:46:12 -08:00
| Tag Name | Theme Props | Additional Props | Default Props |
|---------------------|-------------------------------------------------------------------------------------------------------------|----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| * * `Text` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br /> [**Typography** ](./props#typography ) | — | **color ** : primary<br /> **fontFamily ** : text<br />**fontSize**: text<br />**textAlign**: left<br />**margin**: textMargin |
2024-12-13 07:06:40 -08:00
| * * `FitText` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br /> [**Typography** ](./props#typography ) | — | **color ** : primary<br /> **fontFamily ** : text<br />**fontSize**: text<br />**textAlign**: center<br />**margin**: textMargin |
2023-02-24 19:46:12 -08:00
| * * `Heading` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br /> [**Typography** ](./props#typography ) | — | **color ** : secondary<br /> **fontFamily ** : header<br />**fontSize**: h1<br />**fontWeight**: bold<br />**textAlign**: center<br />**margin**: headerMargin |
| * * `Link` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br /> [**Typography** ](./props#typography )<br /> | **href ** : PropTypes.string | **color ** : quaternary<br /> **fontFamily ** : text<br />**fontSize**: text<br />**textDecoration**: underline<br />**textAlign**: left<br />**margin**: textMargin |
| * * `Quote` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br /> [**Typography** ](./props#typography )<br /> | — | **color ** : primary<br /> **fontFamily ** : text<br />**fontSize**: text<br />**textAlign**: left<br />**borderLeft**: 1px solid secondary |
| * * `OrderedList` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br /> [**Typography** ](./props#typography ) | — | **color ** : primary<br /> **fontFamily ** : text<br />**fontSize**: text<br />**textAlign**: left<br />**margin**: listMargin |
| * * `UnorderedList` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br /> [**Typography** ](./props#typography ) | — | **color ** : primary<br /> **fontFamily ** : text<br />**fontSize**: text<br />**textAlign**: left<br />**margin**: listMargin |
| * * `ListItem` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br /> [**Typography** ](./props#typography ) | — | **margin ** : listMargin |
| * * `CodeSpan` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br /> [**Typography** ](./props#typography ) | — | **fontFamily ** : monospace<br />**fontSize**: text |
2020-02-22 08:48:03 -07:00
2023-05-08 11:44:34 -05:00
2024-05-08 17:05:35 -04:00
## Templates
2023-05-08 11:44:34 -05:00
Templates are overlays that are present on every slide. Typically, they contain controls and deck progress. Spectacle contains a default template, shown below, ready to use that contains the full screen control and the animated progress dots. `<DefaultTemplate />` also supports customizing the color using the prop `color` and CSS color values such as `purple` or `#fff` .
``` tsx
import { Deck , DefaultTemplate } from 'spectacle'
const Presentation = ( ) = > (
< Deck theme = { theme } template = { < DefaultTemplate / > } >
{ /* Your presentation here */ }
< / Deck >
)
```
You can also create a custom template component. Props provided to the template component are:
| Props | Type | Description |
|------------------|--------|----------------------------------------|
| `slideNumber` | number | The current index of the active slide. |
| `numberOfSlides` | number | The total count of slides in the deck. |
2020-01-27 11:52:35 -06:00
## Layout Tags
These tags are for adding structure to your slides.
2020-04-21 14:01:34 -06:00
A template render function consists of one or more Layout tags — it is supplied to the `Deck` component to apply to all subsequent `Slide` s.
2020-01-27 11:52:35 -06:00
2023-02-24 19:46:12 -08:00
| Tag Name | Theme Props | Additional Props | Default Props |
|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------|-------------------|
| * * `Box` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br />[**Layout** ](./props#layout )<br />[**Position** ](./props#position )<br /> [**Border** ](./props#border ) | — | — |
| * * `FlexBox` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br />[**Layout** ](./props#layout )<br />[**Position** ](./props#position )<br /> [**Border** ](./props#border )<br />[**Flex** ](./props#flex )<br /> | — | — |
| * * `Grid` ** | [**Layout** ](./props#layout )<br />[**Position** ](./props#position )<br />[**Grid** ](./props#grid )<br /> | — | **display ** : grid |
2020-03-06 16:16:25 -06:00
## Table Tags
These tags are for adding tables with content to your slides.
2023-02-24 19:46:12 -08:00
| Tag Name | Theme Props | Additional Props | Default Props |
|-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
| * * `Table` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br />[**Layout** ](./props#layout )<br />[**Typography** ](./props#typography )<br /> [**Border** ](./props#border ) | - | **color ** : primary<br />**fontFamily**: text<br />**fontSize**: text<br />**textAlign:** left<br />**margin**: listMargin |
| * * `TableHeader` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br />[**Layout** ](./props#layout )<br />[**Typography** ](./props#typography )<br /> [**Border** ](./props#border ) | - | **color ** : primary<br />**fontFamily**: text<br />**fontSize**: text<br />**fontWeight**: bold<br />**textAlign:** left<br />**margin**: listMargin |
| * * `TableBody` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br />[**Layout** ](./props#layout )<br />[**Typography** ](./props#typography )<br /> [**Border** ](./props#border ) | - | **color ** : primary<br />**fontFamily**: text<br />**fontSize**: text<br />**textAlign:** left<br />**margin**: listMargin |
| * * `TableRow` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br />[**Layout** ](./props#layout )<br />[**Typography** ](./props#typography )<br /> [**Border** ](./props#border ) | - | **color ** : primary<br />**fontFamily**: text<br />**fontSize**: text<br />**textAlign:** left<br />**margin**: listMargin |
| * * `TableCell` ** | [**Space** ](./props#space )<br />[**Color** ](./props#color )<br />[**Layout** ](./props#layout )<br />[**Typography** ](./props#typography )<br /> [**Border** ](./props#border ) | - | **color ** : primary<br />**fontFamily**: text<br />**fontSize**: text<br />**textAlign:** left<br />**margin**: listMargin |
2020-01-31 15:45:36 -06:00
2021-07-19 11:54:57 -07:00
## useSteps
2023-02-24 19:46:12 -08:00
The `useSteps` hook allows a component to participate in the _ slide step sequence _ for a given Slide.
2021-07-19 11:54:57 -07:00
NOTE: the vast majority of use cases are covered by the `Stepper` and `Appear` components documented below- in fact, they are implemented via this hook. The only case in which you may need to use this hook explicitly is if you need more precise control over a component in your presentation.
### Arguments and Options
- `numSteps` The first argument to this hook, `numSteps` , indicates how many steps your component will occupy in the slide step sequence. The second argument is an options object which accepts two options: `id` and `stepIndex` .
- `options.id` : _ (For debugging and testing purposes only.) _ Allows you to customize the step sequence ID for this component.
- `options.priority` : Allows fine-grained control over the sequencing of multiple step sequence participants in a given Slide. By default, participants will be activated in the order in which they are rendered. However, this option allows you to specify a "priority"- for instance, a participant with `priority: -1` will run before any other participant, _ regardless _ of render order.
### Return Values
This hook returns four values: `stepId` , `isActive` , `step` , and `placeholder` .
- `stepId` : _ (For debugging and testing purposes only.) _ Either the `id` option passed into the hook, or a randomly-generated ULID.
- `step` : the _ relative _ step within this participant's step sequence. Before the slide has reached this participant, this value is `-1` . When the slide reaches this stepper, it will increase at each step until it reaches `numSteps - 1` , and will remain there after the slide step has 'passed' it.
- `isActive` : Boolean value indicating whether the slide step sequence has reached this participant. Equivalent to the expression `step >= 0` .
- `placeholder` : DOM node which _ must _ be rendered by the consumer component- this is how a Slide detects step sequence participants.
## Stepper
`<Stepper>` 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
< Slide >
< p > Hello , world ! < / p >
< Stepper tagName = "p" alwaysVisible values = { [ 'foo' , 'bar' ] } >
{ ( value , step , isActive ) =>
isActive
2023-05-06 10:11:06 -04:00
? ` The first stepper is active. Step: ${ step } Value: ${ value } `
: ` The first stepper is not active. Step: ${ step } Value: ${ value } `
2021-07-19 11:54:57 -07:00
}
< / Stepper >
< Stepper tagName = "p" alwaysVisible values = { [ 'baz' , 'quux' ] } >
{ ( value , step , isActive ) =>
isActive
2023-05-06 10:11:06 -04:00
? ` The second stepper is active. Step: ${ step } Value: ${ value } `
: ` The second stepper is not active. Step: ${ step } Value: ${ value } `
2021-07-19 11:54:57 -07:00
}
< / Stepper >
< / Slide >
```
The following output will be rendered as you step through the slide:
``` html
<!-- When the slide is first rendered (slide step 0) -->
< p > Hello, world!< / p >
< p > The first stepper is not active. Step: -1 Value: undefined< / p >
< p > The second stepper is not active. Step: -1 Value: undefined< / p >
<!-- slide step 1 -->
< p > Hello, world!< / p >
< p > The first stepper is active. Step: 0 Value: foo< / p >
< p > The second stepper is not active. Step: -1 Value: undefined< / p >
<!-- slide step 2 -->
< p > Hello, world!< / p >
< p > The first stepper is active. Step: 1 Value: bar< / p >
< p > The second stepper is not active. Step: -1 Value: undefined< / p >
<!-- slide step 3 -->
< p > Hello, world!< / p >
< p > The first stepper is active. Step: 1 Value: bar< / p >
< p > The second stepper is active. Step: 0 Value: baz< / p >
<!-- slide step 3 -->
< p > Hello, world!< / p >
< p > The first stepper is active. Step: 1 Value: bar< / p >
< p > The second stepper is active. Step: 0 Value: baz< / p >
<!-- slide step 4 -->
< p > Hello, world!< / p >
< p > The first stepper is active. Step: 1 Value: bar< / p >
< p > The second stepper is active. Step: 1 Value: quux< / p >
```
### 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 `<Stepper>` is active. Defaults to `{ opacity: 1 }` .
- `inactiveStyle` : Style object applied when this `<Stepper>` is inactive. Defaults to `{ opacity: 0 }` .
2020-02-22 08:48:03 -07:00
## Appear
2020-01-31 15:45:36 -06:00
2021-07-19 11:54:57 -07:00
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` .
2020-01-31 15:45:36 -06:00
2021-07-19 11:54:57 -07:00
### 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 `<Appear>` is active. Defaults to `{ opacity: 1 }` .
- `inactiveStyle` : Style object applied when this `<Appear>` is inactive. Defaults to `{ opacity: 0 }` .
2020-01-22 08:59:36 -07:00
2020-01-27 11:52:35 -06:00
## Code Pane
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
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.
2020-01-27 11:52:35 -06:00
2023-05-09 07:38:49 -05:00
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` .
2020-02-25 14:08:10 -08:00
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
Additionally, the `highlightRanges` prop accepts an array that can be used to highlight certain ranges of code:
2020-01-27 11:52:35 -06:00
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
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. _
2020-01-27 11:52:35 -06:00
2023-02-24 19:46:12 -08:00
| 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 ) | | | |
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
``` jsx
2021-04-07 14:32:06 -05:00
import tomorrow from 'react-syntax-highlighter/dist/cjs/styles/prism/tomorrow' ;
2020-01-27 11:52:35 -06:00
( ) => (
< Slide >
2021-04-07 14:32:06 -05:00
< CodePane language = "javascript" theme = { tomorrow } highlightRanges = { [ 1 , 3 ] } >
2020-01-27 11:52:35 -06:00
{ `
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
const App = () => (
<Provider value={client}>
<Todos />
</Provider>
);
` }
2020-01-27 11:52:35 -06:00
< / CodePane >
< / Slide >
) ;
2020-01-22 08:59:36 -07:00
```
2020-02-22 08:48:03 -07:00
## FullScreen
2020-01-31 15:45:36 -06:00
2020-02-22 08:48:03 -07:00
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.
2020-01-31 15:45:36 -06:00
2023-02-24 19:46:12 -08:00
| Props | Type | Example |
|------------------------------------|------------------|-----------|
| `size` | PropTypes.number | `23` |
| `color` | PropTypes.string | `#abc123` |
| [**`Position`** ](./props#position ) | | |
2020-01-31 15:45:36 -06:00
2020-02-22 08:48:03 -07:00
## Image
2020-01-31 15:45:36 -06:00
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
Image is a component to display a picture within a slide. It is analogous to an `<img>` tag and conforms to Layout and Position props.
2020-01-31 15:45:36 -06:00
2023-02-24 19:46:12 -08:00
| Props | Type |
|------------------------------------|------------------|
| src | PropTypes.string |
| [**`Layout`** ](./props#layout ) | |
| [**`Position`** ](./props#position ) | |
2020-01-31 15:45:36 -06:00
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
## Markdown Components
2020-01-31 15:45:36 -06:00
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
The Markdown components let you include a block of Markdown within a slide using `<Markdown />` , author a complete slide with Markdown using `<MarkdownSlide />` , or author a series of slides with Markdown using `<MarkdownSlides />` . Markdown tags get converted into Spectacle components. The `---` three dash marker when used inside `<MarkdownSlideSet />` is used to divide content into separate slides. Markdown also supports presenter notes using the `Notes:` marker. `<Markdown />` must be a child of `<Slide />` where `<MarkdownSlide />` and `<MarkdownSlideSet />` are children of `<Deck />` .
2020-01-31 15:45:36 -06:00
2023-02-24 19:46:12 -08:00
| Props | Type | Example |
|------------------------------------|-------------------|-------------------------------------------------------------------------------------|
| `children` | PropTypes.string | `# Hi there` |
| `componentProps` | PropTypes.object | `<MarkdownSlide componentProps={{ color: 'purple' }}># I'm purple!</MarkdownSlide>` |
| `animateListItems` | PropTypes.boolean | `<MarkdownSlide animateListItems />` |
| [**`Layout`** ](./props#layout ) | | |
| [**`Position`** ](./props#position ) | | |
2020-01-31 15:45:36 -06:00
``` jsx
< Slide >
< Markdown >
# Urql
A highly customizable and versatile GraphQL client
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
< / Markdown >
2020-01-31 15:45:36 -06:00
< Text > Made by Formidable < / Text >
< / Slide >
2021-03-15 08:25:13 -05:00
< MarkdownSlide animateListItems >
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
# Use Markdown to write a slide
This is a single slide composed using Markdown .
2021-03-15 08:25:13 -05:00
- It uses the ` animateListItems ` prop so ...
- it 's list items...
- will animate in, one at a time.
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
</MarkdownSlide>
<MarkdownSlideSet>
# Markdown Slide Sets
2020-01-31 15:45:36 -06:00
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
Let you write a sequence of slides using Markdown.
2020-01-31 15:45:36 -06:00
---
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
# This is the Second Slide in the Set
2020-01-31 15:45:36 -06:00
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
Using the `---` delimiter creates a new slide in the set.
2020-01-31 15:45:36 -06:00
Notes: The easiest way to always display up-to-date data is to set the requestPolicy to ' cache - and - network ' .
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
< / MarkdownSlideSet >
2020-01-31 15:45:36 -06:00
```
Merge v7 Spectacle into main (#980)
* Adds business logic hooks and util functions (#930)
* Add util functions
* Added more hooks and numeric functions
* Remove double import
* Updated using mergeAnything
* Integrate Deck and Slide components into existing codebase (#932)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Added Slide Fragments Example.
* Remove local image from example
* v7: Integrate Markdown, Markdown Slide Set, and new Code Pane (#934)
* Started integration work on deck and slide for v7
* Continued work on integration
* Finished initial pass of integrating deck and slide.
* Remove local image from example
* Added more work for MD support
* Working on code slide
* Use Theme Sizing for CodePane.
* Finished Code Pane theming
* Fix imports for Markdown, MarkdownSlideSet
* Updated exports and moved hoisted function.
* Update one-page and rebuild with new js example. Add back control comments. Fix react-dom externals declaration.
* Revert version number
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Add base Presenter View to Spectacle v7 (#940)
* Add base Presenter View with Notes support.
* Finished navigation and UI for presenter view.
* Use Broadcast Channel for Dual-Browser message bus for presenting. (#942)
* Use Broadcast Channel for Dual-Browser message bus for presenting.
* Remove debug console statement.
* Feature/templates progress v7 (#946)
* Added template support, fixed Progress component.
* Fix tests for Progress and new Deck Context
* Fix examples Notes import; update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Update ESLint Configuration; Delete Older Files (#947)
* Fix lint issues, delete old files.
* Fix curried component in docs.
* Updated Overview Mode (#950)
* Add base Overview mode.
* Got initial pass of Overview Deck working
* Updated for better Overview mode
* Fix scaling on overview slide.
* Fix Overview Style for Portal.
* Updated styles for focus.
* Fix line endings to LF
* Fix card sizing in overview mode. Added Broadcast Channel polyfill.
* Fix imports!
* Update one-page
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
* Support presenter and overview mode query params inside the url. (#955)
* also update main-7 - fix analgous to analogous, precents to percents (#957)
* Bump version number for Babel to build on Windows (#962)
* Changes for version 7.0.0-beta.1
* 7.0.0-beta.1
* Pass current slide and total count to template. (#963)
* V7: Overview Mode | Update the slideIndex value in url after a user presses tab to select a slide (#961)
* add tab and shift+tab events to useMouseTrap hook in overview mode
add tabindex = 0 only on current slide
outline current slide when switching to overview mode
* add payload option to regressSlide() action to reset the stepIndex back to 0 when regressing slides in overview mode
* overview mode - allow user to press enter to select a slide and exit overview mode, or click to select a slide and exit overview mode
* alphabetically order dependencies for handleSlideClick callback
* fix hover style appearing in default mode
* rename isOverviewMode to inOverviewMode for clarity
* refactor default-deck to contain toggleMode and keyboard shortcuts instead of in deck.js
* refactor default-deck to have usemousetrap and onslidelick below prevously created functions
* use data-in-overview-mode as a prop to prevent React Warning: inOverviewMode prop on DOM Element
* rename data attribute to data-overview-mode to remove redundant words
* add hover state to control onMouseEnter and onMouseLeave props
* v7: Code Pane | Allow single array range in highlightRanges prop (#959)
* allow single array, 2D containing numbers and single digit ranges
* rename isRangeOneLineNumber to a more clear constant isOneLineNumber
* refactor checkIfSingleArrayInHighlightRanges to remove redundant conditions
* remove redundant function - checkIfSingleArrayInHighlightRanges and refactor numberOfSteps
* refactor to prevent error if a user passes in [null, null] or any null/undefined value in highlightRanges prop
* add isRequired to oneOfType proptype to preven null values in highlightRanges prop
* v7: Documentation | Update props used in CodePane (#964)
* docs: remove deprecated props and update to reflect new added props and themes
* add description for the theme prop and highlightRanges prop
* remove stepIndex prop type, to be described in a later PR, and add list of availableCodePaneThemes
* add Default Props column to display theme default prop value
* refactor description of highlightRanges prop from PR feedback
* Changes for version 7.0.0-beta.2
* 7.0.0-beta.2
* Export and Print Mode (#967)
* Added base print mode
* Clean up navigation with new structure.
* Use the correct theme for print vs export mode.
* Update print theme for better printer colors.
* Changes for version 7.0.0-beta.3
* 7.0.0-beta.3
* Update usePresentation hook tests. (#969)
* Cherry Pick: 971 from main
* Add customizable print props and update docs for print props (#972)
* Add customizable print props and update docs for print props
* Remove double propTypes import.
* Changes for version 7.0.0-beta.4
* 7.0.0-beta.4
* Markdown: Fixes and Documentation (#974)
* Fix Notes in Markdown. Update docs for Markdown components.
* Add migration guide for v7
* Changes for version 7.0.0-beta.5
* 7.0.0-beta.5
* Convert functions to arrow functions for js examples (#976)
Co-authored-by: Urmit Patel <upatel@hagerty.com>
* Add Auto-Play support. (#977)
* Add Auto-Play support.
* Simplify tick callback.
* Fix overflow in Presenter Mode for last slide. (#978)
* Fix versions for ESLint for Docs and One Page
* Clean up code.
Co-authored-by: Ryan Roemer <ryan.roemer@formidable.com>
Co-authored-by: Christian Ipanaque <chris.ipanaque@gmail.com>
Co-authored-by: urmit <urmit.patel@formidable.com>
Co-authored-by: Urmit Patel <upatel@hagerty.com>
2021-02-04 07:32:52 -06:00
#### v7 Migration Guide
In prior versions of Spectacle the `<Markdown />` 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. `<Slide><Markdown /></Slide>` remains the same.
2. `<Markdown />` when used for a full slide is now `<MarkdownSlide />` .
3. `<Markdown containsSlides />` is now `<MarkdownSlideSet />` .
2020-02-22 08:48:03 -07:00
## Notes
2020-01-22 16:22:15 -06:00
2020-02-22 08:48:03 -07:00
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.
2020-01-22 16:22:15 -06:00
2020-04-21 14:01:34 -06:00
| Props | Type | Example |
2022-09-30 13:16:35 -07:00
|------------|------------------|-------------------|
2020-04-21 14:01:34 -06:00
| `children` | PropTypes.string | `Presenter Notes` |
2020-01-22 16:22:15 -06:00
``` jsx
2020-02-22 08:48:03 -07:00
< Slide >
< Heading > Urql < / Heading >
< Text > A highly customizable and versatile GraphQL client < / Text >
< Notes >
Urql is a GraphQL client that exposes a set of React components and hooks .
< / Notes >
< / Slide >
2020-01-22 16:22:15 -06:00
```
2020-02-22 08:48:03 -07:00
## Progress
2020-02-11 09:00:51 -06:00
2022-06-10 19:43:04 +01:00
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.
2020-02-11 09:00:51 -06:00
2023-02-24 19:46:12 -08:00
| Props | Type | Example |
|------------------------------------|------------------|-----------|
| `size` | PropTypes.number | `23` |
| `color` | PropTypes.string | `#abc123` |
| [**`Position`** ](./props#position ) | | |
2022-06-10 19:43:04 +01:00
## 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.
2023-02-24 19:46:12 -08:00
| Props | Type | Example |
|------------------------------------|------------------|-----------|
| `size` | PropTypes.number | `23` |
| `color` | PropTypes.string | `#abc123` |
| `pacmanColor` | PropTypes.string | `#abc123` |
| [**`Position`** ](./props#position ) | | |
