\n \n ,\n document.querySelector('#root')\n)\n```\n\n## Components\n\nAll components support the following properties:\n\n```ts\n // pass in an id that you will use for the same element in other slides to enable smooth transitions\n // `autoAnimate` must be passed to the slides to enable this (see the reveal.js documentation for `data-id`)\n autoAnimateId?: string;\n className?: string; // any additional class name(s), will be concatenated with the fragment classnames\n fragment?: boolean; // if true, this is treated as a fragment (see the reveal.js documentation)\n fragmentStyle?: string; // any extra fragment-specific style\n fragmentIndex?: number; // the fragment index (see the reveal.js documentation)\n fitText?: boolean; // if true, adds the \"r-fit-text\" classname (see the reveal.js documentation)\n```\n\n### RevealJS\n\nThe properties are the same as the configuration object passed to `Reveal.initialize()`. This package adds an additional property `onDeckReady` which is called when initialization has succeeded and the API is ready to interact. Alternatively, to define custom interactions with child components, use the [useReveal hook](#usereveal).\n\n```ts\n plugins = [],\n\n // Display presentation control arrows\n controls = true,\n\n // Help the user learn the controls by providing hints, for example by\n // bouncing the down arrow when they first encounter a vertical slide\n controlsTutorial = true,\n\n // Determines where controls appear, \"edges\" or \"bottom-right\"\n controlsLayout = 'bottom-right',\n\n // Visibility rule for backwards navigation arrows; \"faded\", \"hidden\"\n // or \"visible\"\n controlsBackArrows = 'faded',\n\n // Display a presentation progress bar\n progress = true,\n\n // Display the page number of the current slide\n // - true = Show slide number\n // - false = Hide slide number\n //\n // Can optionally be set as a string that specifies the number formatting =\n // - \"h.v\" = Horizontal . vertical slide number (default)\n // - \"h/v\" = Horizontal / vertical slide number\n // - \"c\" = Flattened slide number\n // - \"c/t\" = Flattened slide number / total slides\n //\n // Alternatively, you can provide a function that returns the slide\n // number for the current slide. The function should take in a slide\n // object and return an array with one string [slideNumber] or\n // three strings [n1,delimiter,n2]. See #formatSlideNumber().\n slideNumber = false,\n\n // Can be used to limit the contexts in which the slide number appears\n // - \"all\" = Always show the slide number\n // - \"print\" = Only when printing to PDF\n // - \"speaker\" = Only in the speaker view\n showSlideNumber = 'all',\n\n // Use 1 based indexing for # links to match slide number (default is zero\n // based)\n hashOneBasedIndex = false,\n\n // Add the current slide number to the URL hash so that reloading the\n // page/copying the URL will return you to the same slide\n hash = false,\n\n // Flags if we should monitor the hash and change slides accordingly\n respondToHashChanges = true,\n\n // Push each slide change to the browser history. Implies `hash = true`\n history = false,\n\n // Enable keyboard shortcuts for navigation\n keyboard = true,\n\n // Optional function that blocks keyboard events when retuning false\n //\n // If you set this to 'focused', we will only capture keyboard events\n // for embedded decks when they are in focus\n keyboardCondition = null,\n\n // Disables the default reveal.js slide layout (scaling and centering)\n // so that you can use custom CSS layout\n disableLayout = false,\n\n // Enable the slide overview mode\n overview = true,\n\n // Vertical centering of slides\n center = true,\n\n // Enables touch navigation on devices with touch input\n touch = true,\n\n // Loop the presentation\n loop = false,\n\n // Change the presentation direction to be RTL\n rtl = false,\n\n // Changes the behavior of our navigation directions.\n //\n // \"default\"\n // Left/right arrow keys step between horizontal slides, up/down\n // arrow keys step between vertical slides. Space key steps through\n // all slides (both horizontal and vertical).\n //\n // \"linear\"\n // Removes the up/down arrows. Left/right arrows step through all\n // slides (both horizontal and vertical).\n //\n // \"grid\"\n // When this is enabled, stepping left/right from a vertical stack\n // to an adjacent vertical stack will land you at the same vertical\n // index.\n //\n // Consider a deck with six slides ordered in two vertical stacks =\n // 1.1 2.1\n // 1.2 2.2\n // 1.3 2.3\n //\n // If you're on slide 1.3 and navigate right, you will normally move\n // from 1.3 -> 2.1. If \"grid\" is used, the same navigation takes you\n // from 1.3 -> 2.3.\n navigationMode = 'default',\n\n // Randomizes the order of slides each time the presentation loads\n shuffle = false,\n\n // Turns fragments on and off globally\n fragments = true,\n\n // Flags whether to include the current fragment in the URL,\n // so that reloading brings you to the same fragment position\n fragmentInURL = true,\n\n // Flags if the presentation is running in an embedded mode,\n // i.e. contained within a limited portion of the screen\n embedded = false,\n\n // Flags if we should show a help overlay when the question-mark\n // key is pressed\n help = true,\n\n // Flags if it should be possible to pause the presentation (blackout)\n pause = true,\n\n // Flags if speaker notes should be visible to all viewers\n showNotes = false,\n\n // Global override for autolaying embedded media (video/audio/iframe)\n // - null = Media will only autoplay if data-autoplay is present\n // - true = All media will autoplay, regardless of individual setting\n // - false = No media will autoplay, regardless of individual setting\n autoPlayMedia = null,\n\n // Global override for preloading lazy-loaded iframes\n // - null = Iframes with data-src AND data-preload will be loaded when within\n // the viewDistance, iframes with only data-src will be loaded when visible\n // - true = All iframes with data-src will be loaded when within the viewDistance\n // - false = All iframes with data-src will be loaded only when visible\n preloadIframes = null,\n\n // Can be used to globally disable auto-animation\n autoAnimate = true,\n\n // Optionally provide a custom element matcher that will be\n // used to dictate which elements we can animate between.\n autoAnimateMatcher = null,\n\n // Default settings for our auto-animate transitions, can be\n // overridden per-slide or per-element via data arguments\n autoAnimateEasing = 'ease',\n autoAnimateDuration = 1.0,\n autoAnimateUnmatched = true,\n\n // CSS properties that can be auto-animated. Position & scale\n // is matched separately so there's no need to include styles\n // like top/right/bottom/left, width/height or margin.\n autoAnimateStyles = [\n 'opacity',\n 'color',\n 'background-color',\n 'padding',\n 'font-size',\n 'line-height',\n 'letter-spacing',\n 'border-width',\n 'border-color',\n 'border-radius',\n 'outline',\n 'outline-offset',\n ],\n\n // Controls automatic progression to the next slide\n // - 0 = Auto-sliding only happens if the data-autoslide HTML attribute\n // is present on the current slide or fragment\n // - 1+ = All slides will progress automatically at the given interval\n // - false = No auto-sliding, even if data-autoslide is present\n autoSlide = 0,\n\n // Stop auto-sliding after user input\n autoSlideStoppable = true,\n\n // Use this method for navigation when auto-sliding (defaults to navigateNext)\n autoSlideMethod = null,\n\n // Specify the average time in seconds that you think you will spend\n // presenting each slide. This is used to show a pacing timer in the\n // speaker view\n defaultTiming = null,\n\n // Enable slide navigation via mouse wheel\n mouseWheel = false,\n\n // Opens links in an iframe preview overlay\n // Add `data-preview-link` and `data-preview-link=\"false\"` to customise each link\n // individually\n previewLinks = false,\n\n // Exposes the reveal.js API through window.postMessage\n postMessage = true,\n\n // Dispatches all reveal.js events to the parent window through postMessage\n postMessageEvents = false,\n\n // Focuses body when page changes visibility to ensure keyboard shortcuts work\n focusBodyOnPageVisibilityChange = true,\n\n // Transition style\n transition = 'slide', // none/fade/slide/convex/concave/zoom\n\n // Transition speed\n transitionSpeed = 'default', // default/fast/slow\n\n // Transition style for full page slide backgrounds\n backgroundTransition = 'fade', // none/fade/slide/convex/concave/zoom\n\n // The maximum number of pages a single slide can expand onto when printing\n // to PDF, unlimited by default\n pdfMaxPagesPerSlide = Number.POSITIVE_INFINITY,\n\n // Prints each fragment on a separate slide\n pdfSeparateFragments = true,\n\n // Offset used to reduce the height of content within exported PDF pages.\n // This exists to account for environment differences based on how you\n // print to PDF. CLI printing options, like phantomjs and wkpdf, can end\n // on precisely the total height of the document whereas in-browser\n // printing has to end one pixel before.\n pdfPageHeightOffset = -1,\n\n // Number of slides away from the current that are visible\n viewDistance = 3,\n\n // Number of slides away from the current that are visible on mobile\n // devices. It is advisable to set this to a lower number than\n // viewDistance in order to save resources.\n mobileViewDistance = 2,\n\n // The display mode that will be used to show slides\n display = 'block',\n\n // Hide cursor if inactive\n hideInactiveCursor = true,\n\n // Time before the cursor is hidden (in ms)\n hideCursorTime = 5000,\n\n // Parallax background image\n parallaxBackgroundImage = '', // CSS syntax, e.g. \"a.jpg\"\n\n // Parallax background size\n parallaxBackgroundSize = '', // CSS syntax, e.g. \"3000px 2000px\"\n\n // Parallax background repeat\n parallaxBackgroundRepeat = '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit\n\n // Parallax background position\n parallaxBackgroundPosition = '', // CSS syntax, e.g. \"top left\"\n\n // Number of pixels to move the parallax background per slide\n // - Calculated automatically unless specified\n // - Set to 0 to disable movement along an axis\n parallaxBackgroundHorizontal = 200,\n parallaxBackgroundVertical = 50,\n\n // The \"normal\" size of the presentation, aspect ratio will\n // be preserved when the presentation is scaled to fit different\n // resolutions. Can be specified using percentage units.\n width = 960,\n height = 700,\n\n // Factor of the display size that should remain empty around\n // the content\n margin = 0.04,\n\n // Bounds for smallest/largest possible scale to apply to content\n minScale = 0.2,\n maxScale = 2.0,\n\n // a callback to access the deck when it is ready for interaction, accepts a single parameter.\n onDeckReady,\n```\n\n### Slide\n\nThe `Slide` component adds a `` to create a slide. It supports these properties\n\n```ts\n autoslide?: true;\n autoAnimate?: true;\n autoAnimateUnmatched?: boolean;\n backgroundColor?: string;\n backgroundImage?: string;\n backgroundSize?: string;\n backgroundPosition?: string;\n backgroundRepeat?: string;\n backgroundOpacity?: string;\n backgroundVideo?: string;\n backgroundVideoLoop?: true;\n backgroundVideoMuted?: true;\n backgroundIframe?: string;\n backgroundInteractive?: true;\n id?: string;\n transition?: Transitions;\n // Transitions can be: 'none' | 'fade' | 'slide' | 'convex' | 'concave' | 'zoom'\n // or a combo of 'fade-in fade-out' or 'slide-in fade-out' etc.\n transitionSpeed?: TransitionSpeed; // 'default' | 'fast' | 'slow'\n visibility?: 'uncounted' | 'hidden';\n```\n\n### Elements\n\n#### Code\n\nThe `Code` component sets helpers for animation across slides. Use the `HighlightPlugin` to add code highlighting.\n\n```ts\n children: { code: string }; // pass `{ code: 'console.log(\"hello world\");' }`, for example\n language?: string; // for example \"typescript\"\n escape?: boolean; // html escape the code\n lineNumbers?: string | true; // display line numbers. This is turned on if you specify autoAnimateId\n noTrim?: boolean; // if true, disables trimming whitespace on the edges of the code\n // pass in an id that you will use for the same code block in other slides to enable smooth transitions\n // `autoAnimate` must be passed to the slides to enable this (see the reveal.js documentation for `data-id`)\n autoAnimateId?: string;\n```\n\n#### Audio\n\nThe `Audio` component accepts all the parameters of the `audio` html tag, plus these properties:\n\n```ts\n autoplay?: boolean;\n controls?: boolean;\n lazy?: string; // lazy-loads the audio, using data-src\n loop?: boolean;\n muted?: boolean;\n preload?: boolean; // sets data-preload\n src: string;\n```\n\n#### BlockQuote\n\nsupports all the standard `blockquote` parameters plus the reveal.js addons above\n\n#### Div\n\nsupports all the standard `div` parameters plus the reveal.js addons above\n\n#### Div\n\nLike `Code` but `source` is a prop. Children are rendered with a toggle to switch between viewing source and viewing the example.\n\nFor added power, use the babel macro imported from `@gregcello/revealjs-react/example.macro` and source code will be auto-extracted from the source file. The macro is still experimental.\n\n```tsx\nimport { Example } from '@gregcello/revealjs-react/example.macro'\n\nfunction test() {\n return (\n \n thing\n \n )\n}\n```\n\nThe above will toggle displaying `thing` and highlighted `thing`\n\nThe macro only supports tsx elements. Soon, support will be added for interpolated elements like this:\n\n```tsx\nimport { Example } from '@gregcello/revealjs-react/example.macro'\n\nfunction test() {\n return (\n \n {() => {\n const [something, setSomething] = useState('hi')\n return (\n
\n {something}\n \n
\n )\n }}\n \n )\n}\n```\n\n#### FigCaption\n\nsupports all the standard `figcaption` parameters plus the reveal.js addons above\n\n#### Figure\n\nsupports all the standard `figure` parameters plus the reveal.js addons above\n\n#### Footer\n\nsupports all the standard `footer` parameters plus the reveal.js addons above\n\n#### Fragment\n\nthis creates a fragment. set fragment index with the `index` prop, and control animations with the `animation` prop. Use a `Note` inside the fragment to set fragment-specific notes.\n\n#### H1\n\nsupports all the standard `h1` parameters plus the reveal.js addons above\n\n#### H2\n\nsupports all the standard `h2` parameters plus the reveal.js addons above\n\n#### H3\n\nsupports all the standard `h3` parameters plus the reveal.js addons above\n\n#### H4\n\nsupports all the standard `h4` parameters plus the reveal.js addons above\n\n#### H5\n\nsupports all the standard `h5` parameters plus the reveal.js addons above\n\n#### H6\n\nsupports all the standard `h6` parameters plus the reveal.js addons above\n\n#### Header\n\nsupports all the standard `header` parameters plus the reveal.js addons above\n\n#### IFrame\n\nsupports all the standard `iframe` parameters plus the reveal.js addons above, and these additional properties:\n\n`src` must be set to the iframe source. pass in `lazy={true}` to lazy-load the iframe. pass `preload={true}` if it is safe to pre-load the iframe\n\n#### Image\n\n#### Li\n\nsupports all the standard `li` parameters plus the reveal.js addons above\n\n#### Link\n\nsupports all the standard `a` parameters plus the reveal.js addons above. In addition, the `Link` component makes it possible to link to slides easily. Pass in the slide number (1-indexed), the slide id (a string), or the slide itself, retrieved using a ref, and this will link to the slide properly. Preferred is using the slide ID or the slide itself, as this will survive API changes in reveal.js\n\n#### Main\n\nsupports all the standard `main` parameters plus the reveal.js addons above\n\n#### Note\n\n#### Ol\n\nsupports all the standard `ol` parameters plus the reveal.js addons above\n\n#### P\n\nsupports all the standard `p` parameters plus the reveal.js addons above\n\n#### Span\n\nsupports all the standard `span` parameters plus the reveal.js addons above\n\n#### Ul\n\nsupports all the standard `ul` parameters plus the reveal.js addons above\n\n#### Video\n\nThe `Video` component accepts all the parameters of the `video` html tag, plus these properties:\n\n```ts\n // pass in an id that you will use for the same code block in other slides to enable smooth transitions\n // `autoAnimate` must be passed to the slides to enable this (see the reveal.js documentation for `data-id`)\n autoAnimateId?: string;\n autoplay?: boolean;\n controls?: boolean;\n lazy?: string; // lazy-loads the audio, using data-src\n loop?: boolean;\n muted?: boolean;\n preload?: boolean; // sets data-preload\n height?: number;\n preload?: '' | 'metadata' | 'auto' | 'none';\n width?: number;\n src: string[] | string; // this allows specifying multiple video sources or a single source\n```\n\n#### Notes\n\nAdd speaker notes with an `aside` by using this component.\n\n## hooks\n\nIn order to access the internal `Reveal` object, a hook is provided.\n\n### useReveal\n\nThis can be used to retrieve the current Reveal instance. Note that until the deck is initialized, it will be `null`. The type of the deck is strictly typed using custom internal types, as `@types/reveal` is a full major version out of date.\n\n```ts\nimport { useReveal } from '@gregcello/revealjs-react'\n\nexport function MyComponent() {\n const { reveal } = useReveal()\n useEffect(() => {\n if (!reveal) {\n return\n }\n // interact with reveal API - reveal is only set\n // when it is initialized and the API is ready to use\n reveal.on('slidechanged', () => {\n /* do something */\n })\n }, [reveal])\n}\n```\n\nNote that this hook must be used in a child component tp the `RevealJs` component. This will not work:\n\n```ts\nimport { useReveal, RevealJS } from \"@gregcello/revealjs-react\";\n\nexport function MyPresentation() {\n const { reveal, readyPromise } = useReveal();\n // don't do this!\n return (\n \n { /* ... slides go here */ }\n \n )\n```\n\nInstead, use the `onDeckReady` prop as documented [in the RevealJS component](#revealjs)\n\n## Using plugins\n\nBuilt-in plugins from reveal.js are available as direct imports\n\n```ts\nimport { HighlightPlugin, MarkdownPlugin, MathPlugin, NotesPlugin, SearchPlugin, ZoomPlugin } from '@gregcello/revealjs-react'\n\n// then in the source\n\nconst plugins = [HighlightPlugin, MarkdownPlugin, MathPlugin, NotesPlugin, SearchPlugin, ZoomPlugin]\n\nfunction MyPresentation() {\n return // your slides here\n}\n```\n\nUse only the plugins you need. These plugins are strictly typed using custom typescript definitions. To define or type your own custom plugin, use the `RevealPlugin` type exported from `@gregcello/revealjs-react`\n","readmeFilename":"README.md"}