├── .gitignore
├── .babelrc
├── plugins
├── math.esm.js
├── math.js
├── zoom.esm.js
├── zoom.js
├── notes.esm.js
├── notes.js
├── search.esm.js
├── search.js
├── highlight.esm.js
└── highlight.js
├── .prettierrc
├── src
├── components
│ ├── note.js
│ ├── p.js
│ ├── li.js
│ ├── ol.js
│ ├── ul.js
│ ├── div.js
│ ├── main.js
│ ├── span.js
│ ├── figure.js
│ ├── footer.js
│ ├── header.js
│ ├── blockquote.js
│ ├── figcaption.js
│ ├── image.js
│ ├── iframe.js
│ ├── code.js
│ ├── link.js
│ ├── slide.js
│ ├── audio.js
│ ├── video.js
│ ├── h.js
│ └── reveal.js
└── index.js
├── test
├── index.html
├── monokai.css
├── index.jsx
└── theme.css
├── webpack.config.js
├── .eslintrc.json
├── rollup.config.js
├── LICENSE
├── package.json
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | test/bundle.js
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env", "@babel/preset-react"]
3 | }
4 |
--------------------------------------------------------------------------------
/plugins/math.esm.js:
--------------------------------------------------------------------------------
1 | import RevealMath from 'reveal.js/plugin/math/math.esm';
2 |
3 | export default RevealMath;
4 |
--------------------------------------------------------------------------------
/plugins/math.js:
--------------------------------------------------------------------------------
1 | const RevealMath = require('reveal.js/plugin/math/math');
2 |
3 | exports.default = RevealMath;
4 |
--------------------------------------------------------------------------------
/plugins/zoom.esm.js:
--------------------------------------------------------------------------------
1 | import RevealZoom from 'reveal.js/plugin/zoom/zoom.esm';
2 |
3 | export default RevealZoom;
4 |
--------------------------------------------------------------------------------
/plugins/zoom.js:
--------------------------------------------------------------------------------
1 | const RevealZoom = require('reveal.js/plugin/zoom/zoom');
2 |
3 | exports.default = RevealZoom;
4 |
--------------------------------------------------------------------------------
/plugins/notes.esm.js:
--------------------------------------------------------------------------------
1 | import RevealNotes from 'reveal.js/plugin/notes/notes.esm';
2 |
3 | export default RevealNotes;
4 |
--------------------------------------------------------------------------------
/plugins/notes.js:
--------------------------------------------------------------------------------
1 | const RevealNotes = require('reveal.js/plugin/notes/notes');
2 |
3 | exports.default = RevealNotes;
4 |
--------------------------------------------------------------------------------
/plugins/search.esm.js:
--------------------------------------------------------------------------------
1 | import RevealSearch from 'reveal.js/plugin/search/search.esm';
2 |
3 | export default RevealSearch;
4 |
--------------------------------------------------------------------------------
/plugins/search.js:
--------------------------------------------------------------------------------
1 | const RevealSearch = require('reveal.js/plugin/search/search');
2 |
3 | exports.default = RevealSearch;
4 |
--------------------------------------------------------------------------------
/plugins/highlight.esm.js:
--------------------------------------------------------------------------------
1 | import RevealHighlight from 'reveal.js/plugin/highlight/highlight.esm';
2 |
3 | export default RevealHighlight;
4 |
--------------------------------------------------------------------------------
/plugins/highlight.js:
--------------------------------------------------------------------------------
1 | const RevealHighlight = require('reveal.js/plugin/highlight/highlight');
2 |
3 | exports.default = RevealHighlight;
4 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "tabWidth": 2,
3 | "useTabs": false,
4 | "jsxSingleQuote": false,
5 | "singleQuote": true,
6 | "trailingComma": "all"
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/note.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Note({ children }) {
4 | return ;
5 | }
6 |
7 | export default Note;
8 |
--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React RevealJS
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/components/p.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function P({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | export default P;
28 |
--------------------------------------------------------------------------------
/src/components/li.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Li({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | export default Li;
28 |
--------------------------------------------------------------------------------
/src/components/ol.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Ol({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | export default Ol;
28 |
--------------------------------------------------------------------------------
/src/components/ul.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Ul({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
24 | );
25 | }
26 |
27 | export default Ul;
28 |
--------------------------------------------------------------------------------
/src/components/div.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Div({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | export default Div;
28 |
--------------------------------------------------------------------------------
/src/components/main.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Main({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | export default Main;
28 |
--------------------------------------------------------------------------------
/src/components/span.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Span({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | export default Span;
28 |
--------------------------------------------------------------------------------
/src/components/figure.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Figure({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | export default Figure;
28 |
--------------------------------------------------------------------------------
/src/components/footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Footer({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
24 | );
25 | }
26 |
27 | export default Footer;
28 |
--------------------------------------------------------------------------------
/src/components/header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Header({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
24 | );
25 | }
26 |
27 | export default Header;
28 |
--------------------------------------------------------------------------------
/src/components/blockquote.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function BlockQuote({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | export default BlockQuote;
28 |
--------------------------------------------------------------------------------
/src/components/figcaption.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function FigCaption({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | children,
10 | }) {
11 | return (
12 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | export default FigCaption;
28 |
--------------------------------------------------------------------------------
/src/components/image.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Image({
4 | id = undefined,
5 | alt = undefined,
6 | className = undefined,
7 | fragment = false,
8 | fragmentStyle = undefined,
9 | fragmentIndex = undefined,
10 | height = undefined,
11 | src,
12 | width = undefined,
13 | }) {
14 | return (
15 | 
29 | );
30 | }
31 |
32 | export default Image;
33 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | mode: 'development',
5 | entry: './test/index.jsx',
6 | module: {
7 | rules: [
8 | { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ },
9 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
10 | { test: /\.css$/, use: ['style-loader', 'css-loader'] },
11 | { test: /\.ttf$/, use: ['file-loader'] },
12 | { test: /\.woff$/, use: ['file-loader'] },
13 | { test: /\.eot$/, use: ['file-loader'] },
14 | ],
15 | },
16 | resolve: {
17 | extensions: ['.js', '.jsx', '.less', '.css'],
18 | },
19 | output: {
20 | filename: 'bundle.js',
21 | path: path.join(__dirname, 'test'),
22 | },
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/iframe.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function IFrame({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | height = undefined,
10 | lazy = undefined,
11 | preload = undefined,
12 | src,
13 | width = undefined,
14 | }) {
15 | return (
16 |
31 | );
32 | }
33 |
34 | export default IFrame;
35 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es6": true,
5 | "node": true
6 | },
7 | "extends": ["airbnb"],
8 | "globals": {
9 | "Atomics": "readonly",
10 | "SharedArrayBuffer": "readonly"
11 | },
12 | "parserOptions": {
13 | "ecmaFeatures": {
14 | "jsx": true
15 | },
16 | "ecmaVersion": 2018,
17 | "sourceType": "module"
18 | },
19 | "plugins": ["react"],
20 | "rules": {
21 | "react/prop-types": "off",
22 | "react/jsx-props-no-spreading": "off",
23 | "react/no-array-index-key": "off",
24 | "react/jsx-filename-extension": "off",
25 | "no-console": "off",
26 | "jsx-a11y/media-has-caption": "off",
27 | "jsx-a11y/iframe-has-title": "off",
28 | "jsx-a11y/anchor-is-valid": "off",
29 | "object-curly-newline": "off",
30 | "operator-linebreak": "off"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/code.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Code({
4 | id = undefined,
5 | children,
6 | className = undefined,
7 | escape = undefined,
8 | fragment = false,
9 | fragmentStyle = undefined,
10 | fragmentIndex = undefined,
11 | lineNumbers = undefined,
12 | noTrim = undefined,
13 | }) {
14 | return (
15 |
25 |
30 | {children.code}
31 |
32 |
33 | );
34 | }
35 |
36 | export default Code;
37 |
--------------------------------------------------------------------------------
/src/components/link.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Link({
4 | id = undefined,
5 | children,
6 | className = undefined,
7 | fragment = false,
8 | fragmentStyle = undefined,
9 | fragmentIndex = undefined,
10 | href = undefined,
11 | slide = undefined,
12 | }) {
13 | return (
14 |
32 | {children}
33 |
34 | );
35 | }
36 |
37 | export default Link;
38 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import peerDepsExternal from 'rollup-plugin-peer-deps-external';
2 | import resolve from '@rollup/plugin-node-resolve';
3 | import babel from '@rollup/plugin-babel';
4 | import commonjs from '@rollup/plugin-commonjs';
5 | import postcss from 'rollup-plugin-postcss';
6 |
7 | const packageJson = require('./package.json');
8 |
9 | export default {
10 | input: 'src/index.js',
11 | output: [
12 | {
13 | file: packageJson.main,
14 | format: 'cjs',
15 | sourcemap: true,
16 | },
17 | {
18 | file: packageJson.module,
19 | format: 'esm',
20 | sourcemap: true,
21 | },
22 | ],
23 | plugins: [
24 | peerDepsExternal(),
25 | resolve(),
26 | babel({
27 | exclude: 'node_modules/**',
28 | presets: ['@babel/preset-env', '@babel/preset-react'],
29 | }),
30 | commonjs(),
31 | postcss(),
32 | ],
33 | external: ['react'],
34 | };
35 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Blake Nedved
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/test/monokai.css:
--------------------------------------------------------------------------------
1 | /*
2 | Monokai style - ported by Luigi Maselli - http://grigio.org
3 | */
4 |
5 | .hljs {
6 | display: block;
7 | overflow-x: auto;
8 | padding: 0.5em;
9 | background: #272822;
10 | color: #ddd;
11 | }
12 |
13 | .hljs-tag,
14 | .hljs-keyword,
15 | .hljs-selector-tag,
16 | .hljs-literal,
17 | .hljs-strong,
18 | .hljs-name {
19 | color: #f92672;
20 | }
21 |
22 | .hljs-code {
23 | color: #66d9ef;
24 | }
25 |
26 | .hljs-class .hljs-title {
27 | color: white;
28 | }
29 |
30 | .hljs-attribute,
31 | .hljs-symbol,
32 | .hljs-regexp,
33 | .hljs-link {
34 | color: #bf79db;
35 | }
36 |
37 | .hljs-string,
38 | .hljs-bullet,
39 | .hljs-subst,
40 | .hljs-title,
41 | .hljs-section,
42 | .hljs-emphasis,
43 | .hljs-type,
44 | .hljs-built_in,
45 | .hljs-builtin-name,
46 | .hljs-selector-attr,
47 | .hljs-selector-pseudo,
48 | .hljs-addition,
49 | .hljs-variable,
50 | .hljs-template-tag,
51 | .hljs-template-variable {
52 | color: #a6e22e;
53 | }
54 |
55 | .hljs-comment,
56 | .hljs-quote,
57 | .hljs-deletion,
58 | .hljs-meta {
59 | color: #75715e;
60 | }
61 |
62 | .hljs-keyword,
63 | .hljs-selector-tag,
64 | .hljs-literal,
65 | .hljs-doctag,
66 | .hljs-title,
67 | .hljs-section,
68 | .hljs-type,
69 | .hljs-selector-id {
70 | font-weight: bold;
71 | }
72 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * revealjs-react 1.0.0
3 | * MIT licensed
4 | *
5 | * Copyright (C) 2020 Blake Nedved, https://blakeanedved.github.io/
6 | */
7 | import Audio from './components/audio';
8 | import BlockQuote from './components/blockquote';
9 | import Code from './components/code';
10 | import Div from './components/div';
11 | import FigCaption from './components/figcaption';
12 | import Figure from './components/figure';
13 | import Footer from './components/footer';
14 | import H from './components/h';
15 | import Header from './components/header';
16 | import IFrame from './components/iframe';
17 | import Image from './components/image';
18 | import Li from './components/li';
19 | import Link from './components/link';
20 | import Main from './components/main';
21 | import Note from './components/note';
22 | import Ol from './components/ol';
23 | import P from './components/p';
24 | import RevealJS from './components/reveal';
25 | import Slide from './components/slide';
26 | import Span from './components/span';
27 | import Ul from './components/ul';
28 | import Video from './components/video';
29 |
30 | export {
31 | Audio,
32 | BlockQuote,
33 | Code,
34 | Div,
35 | FigCaption,
36 | Figure,
37 | Footer,
38 | H,
39 | Header,
40 | IFrame,
41 | Image,
42 | Li,
43 | Link,
44 | Main,
45 | Note,
46 | Ol,
47 | P,
48 | RevealJS,
49 | Slide,
50 | Span,
51 | Ul,
52 | Video,
53 | };
54 |
--------------------------------------------------------------------------------
/src/components/slide.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Slide({
4 | autoslide = undefined,
5 | autoAnimate = undefined,
6 | backgroundColor = undefined,
7 | backgroundImage = undefined,
8 | backgroundSize = undefined,
9 | backgroundPosition = undefined,
10 | backgroundRepeat = undefined,
11 | backgroundOpacity = undefined,
12 | backgroundVideo = undefined,
13 | backgroundVideoLoop = undefined,
14 | backgroundVideoMuted = undefined,
15 | backgroundIframe = undefined,
16 | backgroundInteractive = undefined,
17 | children,
18 | id = undefined,
19 | transition = undefined,
20 | transitionSpeed = undefined,
21 | uncounted = undefined,
22 | }) {
23 | return (
24 |
45 | );
46 | }
47 |
48 | export default Slide;
49 |
--------------------------------------------------------------------------------
/test/index.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-eval */
2 | import React from 'react';
3 | import { render } from 'react-dom';
4 |
5 | import { RevealJS, Slide, Code, Link, Note } from '../src';
6 |
7 | import RevealHighlight from '../plugins/highlight.esm';
8 | import RevealNotes from '../plugins/notes.esm';
9 | import RevealMath from '../plugins/math.esm';
10 | import RevealSearch from '../plugins/search.esm';
11 | import RevealZoom from '../plugins/zoom.esm';
12 |
13 | import './theme.css';
14 | import './monokai.css';
15 |
16 | render(
17 |
26 |
27 | Slide 1
28 | Go to Slide 3
29 |
30 |
31 |
32 | {{
33 | code: `
34 | let planets = [
35 | { name: 'mars', diameter: 6779 },
36 | ]
37 | `,
38 | }}
39 |
40 |
41 | This is some sick code.
42 |
43 |
44 |
45 | {{
46 | code: `
47 | let planets = [
48 | { name: 'mars', diameter: 6779 },
49 | { name: 'earth', diameter: 12742 },
50 | { name: 'jupiter', diameter: 139820 }
51 | ]
52 | `,
53 | }}
54 |
55 |
56 |
57 | Important Equation
58 | \[ E=mc^2 \]
59 |
60 | ,
61 | document.querySelector('.reveal'),
62 | );
63 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "revealjs-react",
3 | "version": "0.1.0",
4 | "description": "A React wrapper for the RevealJS Presentation Library.",
5 | "keywords": [
6 | "React",
7 | "Reveal.js"
8 | ],
9 | "main": "index.js",
10 | "module": "index.esm.js",
11 | "scripts": {
12 | "build": "npx rollup -c",
13 | "build-test": "npx webpack"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/blakeanedved/revealjs-react.git"
18 | },
19 | "author": "Blake Nedved ",
20 | "license": "MIT",
21 | "bugs": {
22 | "url": "https://github.com/blakeanedved/revealjs-react/issues"
23 | },
24 | "homepage": "https://github.com/blakeanedved/revealjs-react#readme",
25 | "dependencies": {
26 | "react": "^16.13.1",
27 | "react-dom": "^16.13.1",
28 | "reveal.js": "^4.0.2"
29 | },
30 | "devDependencies": {
31 | "@babel/cli": "^7.10.3",
32 | "@babel/core": "^7.10.3",
33 | "@babel/node": "^7.10.3",
34 | "@babel/preset-env": "^7.10.3",
35 | "@babel/preset-react": "^7.10.1",
36 | "@rollup/plugin-babel": "^5.0.4",
37 | "@rollup/plugin-commonjs": "^13.0.0",
38 | "@rollup/plugin-node-resolve": "^8.1.0",
39 | "babel-loader": "^8.1.0",
40 | "babel-polyfill": "^6.26.0",
41 | "css-loader": "^3.6.0",
42 | "eslint": "^7.3.1",
43 | "eslint-config-airbnb": "^18.2.0",
44 | "eslint-plugin-import": "^2.22.0",
45 | "eslint-plugin-jsx-a11y": "^6.3.1",
46 | "eslint-plugin-react": "^7.20.0",
47 | "eslint-plugin-react-hooks": "^4.0.4",
48 | "express": "^4.17.1",
49 | "file-loader": "^6.0.0",
50 | "prettier": "^2.0.5",
51 | "rollup": "^2.18.1",
52 | "rollup-plugin-peer-deps-external": "^2.2.2",
53 | "rollup-plugin-postcss": "^3.1.2",
54 | "style-loader": "^1.2.1",
55 | "webpack": "^4.43.0",
56 | "webpack-cli": "^3.3.12"
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/audio.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const formatMap = {
4 | '3gp': 'audio/3gp',
5 | aac: 'audio/aac',
6 | flac: 'audio/flac',
7 | mpg: 'audio/mpeg',
8 | mpeg: 'audio/mpeg',
9 | mp3: 'audio/mp3',
10 | mp4: 'audio/mp4',
11 | m4a: 'audio/mp4',
12 | oga: 'audio/ogg',
13 | ogg: 'audio/ogg',
14 | wav: 'audio/wav',
15 | webm: 'audio/webm',
16 | };
17 |
18 | function Audio({
19 | id = undefined,
20 | autoplay = undefined,
21 | className = undefined,
22 | controls = undefined,
23 | fragment = false,
24 | fragmentIndex = undefined,
25 | fragmentStyle = undefined,
26 | lazy = undefined,
27 | loop = undefined,
28 | muted = undefined,
29 | preload = undefined,
30 | src,
31 | }) {
32 | if (typeof src === 'object') {
33 | return (
34 |
57 | );
58 | }
59 |
60 | return (
61 |
78 | );
79 | }
80 |
81 | export default Audio;
82 |
--------------------------------------------------------------------------------
/src/components/video.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const formatMap = {
4 | '3gp': 'video/3gpp',
5 | mpg: 'audio/mpeg',
6 | mpeg: 'audio/mpeg',
7 | mp4: 'video/mp4',
8 | m4a: 'video/mp4',
9 | m4p: 'video/mp4',
10 | ogv: 'video/ogg',
11 | ogg: 'video/ogg',
12 | mov: 'video/quicktime',
13 | webm: 'video/webm',
14 | };
15 |
16 | function Video({
17 | id = undefined,
18 | autoplay = undefined,
19 | className = undefined,
20 | controls = undefined,
21 | fragment = false,
22 | fragmentStyle = undefined,
23 | fragmentIndex = undefined,
24 | height = undefined,
25 | lazy = undefined,
26 | loop = undefined,
27 | muted = undefined,
28 | preload = undefined,
29 | width = undefined,
30 | src,
31 | }) {
32 | if (typeof src === 'object') {
33 | return (
34 |
59 | );
60 | }
61 |
62 | return (
63 |
82 | );
83 | }
84 |
85 | export default Video;
86 |
--------------------------------------------------------------------------------
/src/components/h.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function H({
4 | id = undefined,
5 | className = undefined,
6 | fragment = false,
7 | fragmentStyle = undefined,
8 | fragmentIndex = undefined,
9 | size = '1',
10 | children,
11 | }) {
12 | if (size === '1') {
13 | return (
14 |
24 | {children}
25 |
26 | );
27 | }
28 |
29 | if (size === '2') {
30 | return (
31 |
41 | {children}
42 |
43 | );
44 | }
45 |
46 | if (size === '3') {
47 | return (
48 |
58 | {children}
59 |
60 | );
61 | }
62 |
63 | if (size === '4') {
64 | return (
65 |
75 | {children}
76 |
77 | );
78 | }
79 |
80 | if (size === '5') {
81 | return (
82 |
92 | {children}
93 |
94 | );
95 | }
96 |
97 | if (size === '6') {
98 | return (
99 |
109 | {children}
110 |
111 | );
112 | }
113 | }
114 |
115 | export default H;
116 |
--------------------------------------------------------------------------------
/test/theme.css:
--------------------------------------------------------------------------------
1 | /**
2 | * White theme for reveal.js. This is the opposite of the 'black' theme.
3 | *
4 | * By Hakim El Hattab, http://hakim.se
5 | */
6 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
7 | section.has-dark-background,
8 | section.has-dark-background h1,
9 | section.has-dark-background h2,
10 | section.has-dark-background h3,
11 | section.has-dark-background h4,
12 | section.has-dark-background h5,
13 | section.has-dark-background h6 {
14 | color: #fff;
15 | }
16 |
17 | /*********************************************
18 | * GLOBAL STYLES
19 | *********************************************/
20 | :root {
21 | --background-color: #fff;
22 | --main-font: Roboto, Helvetica, sans-serif;
23 | --main-font-size: 42px;
24 | --main-color: #222;
25 | --block-margin: 20px;
26 | --heading-margin: 0 0 20px 0;
27 | --heading-font: Roboto, Helvetica, sans-serif;
28 | --heading-color: #222;
29 | --heading-line-height: 1.2;
30 | --heading-letter-spacing: normal;
31 | --heading-text-transform: uppercase;
32 | --heading-text-shadow: none;
33 | --heading-font-weight: 600;
34 | --heading1-text-shadow: none;
35 | --heading1-size: 2.5em;
36 | --heading2-size: 1.6em;
37 | --heading3-size: 1.3em;
38 | --heading4-size: 1em;
39 | --code-font: monospace;
40 | --link-color: #2a76dd;
41 | --link-color-hover: #6ca0e8;
42 | --selection-background-color: #98bdef;
43 | --selection-color: #fff;
44 | }
45 |
46 | .reveal-viewport {
47 | background: #fff;
48 | background-color: #fff;
49 | }
50 |
51 | .reveal {
52 | font-family: 'Roboto', Helvetica, sans-serif;
53 | font-size: 42px;
54 | font-weight: normal;
55 | color: #222;
56 | }
57 |
58 | .reveal ::selection {
59 | color: #fff;
60 | background: #98bdef;
61 | text-shadow: none;
62 | }
63 |
64 | .reveal ::-moz-selection {
65 | color: #fff;
66 | background: #98bdef;
67 | text-shadow: none;
68 | }
69 |
70 | .reveal .slides section,
71 | .reveal .slides section > section {
72 | line-height: 1.3;
73 | font-weight: inherit;
74 | }
75 |
76 | /*********************************************
77 | * HEADERS
78 | *********************************************/
79 | .reveal h1,
80 | .reveal h2,
81 | .reveal h3,
82 | .reveal h4,
83 | .reveal h5,
84 | .reveal h6 {
85 | margin: 0 0 20px 0;
86 | color: #222;
87 | font-family: 'Roboto', Helvetica, sans-serif;
88 | font-weight: 600;
89 | line-height: 1.2;
90 | letter-spacing: normal;
91 | text-transform: uppercase;
92 | text-shadow: none;
93 | word-wrap: break-word;
94 | }
95 |
96 | .reveal h1 {
97 | font-size: 2.5em;
98 | }
99 |
100 | .reveal h2 {
101 | font-size: 1.6em;
102 | }
103 |
104 | .reveal h3 {
105 | font-size: 1.3em;
106 | }
107 |
108 | .reveal h4 {
109 | font-size: 1em;
110 | }
111 |
112 | .reveal h1 {
113 | text-shadow: none;
114 | }
115 |
116 | /*********************************************
117 | * OTHER
118 | *********************************************/
119 | .reveal p {
120 | margin: 20px 0;
121 | line-height: 1.3;
122 | }
123 |
124 | /* Ensure certain elements are never larger than the slide itself */
125 | .reveal img,
126 | .reveal video,
127 | .reveal iframe {
128 | max-width: 95%;
129 | max-height: 95%;
130 | }
131 |
132 | .reveal strong,
133 | .reveal b {
134 | font-weight: bold;
135 | }
136 |
137 | .reveal em {
138 | font-style: italic;
139 | }
140 |
141 | .reveal ol,
142 | .reveal dl,
143 | .reveal ul {
144 | display: inline-block;
145 | text-align: left;
146 | margin: 0 0 0 1em;
147 | }
148 |
149 | .reveal ol {
150 | list-style-type: decimal;
151 | }
152 |
153 | .reveal ul {
154 | list-style-type: disc;
155 | }
156 |
157 | .reveal ul ul {
158 | list-style-type: square;
159 | }
160 |
161 | .reveal ul ul ul {
162 | list-style-type: circle;
163 | }
164 |
165 | .reveal ul ul,
166 | .reveal ul ol,
167 | .reveal ol ol,
168 | .reveal ol ul {
169 | display: block;
170 | margin-left: 40px;
171 | }
172 |
173 | .reveal dt {
174 | font-weight: bold;
175 | }
176 |
177 | .reveal dd {
178 | margin-left: 40px;
179 | }
180 |
181 | .reveal blockquote {
182 | display: block;
183 | position: relative;
184 | width: 70%;
185 | margin: 20px auto;
186 | padding: 5px;
187 | font-style: italic;
188 | background: rgba(255, 255, 255, 0.05);
189 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
190 | }
191 |
192 | .reveal blockquote p:first-child,
193 | .reveal blockquote p:last-child {
194 | display: inline-block;
195 | }
196 |
197 | .reveal q {
198 | font-style: italic;
199 | }
200 |
201 | .reveal pre {
202 | display: block;
203 | position: relative;
204 | width: 90%;
205 | margin: 20px auto;
206 | text-align: left;
207 | font-size: 0.55em;
208 | font-family: monospace;
209 | line-height: 1.2em;
210 | word-wrap: break-word;
211 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
212 | }
213 |
214 | .reveal code {
215 | font-family: monospace;
216 | text-transform: none;
217 | }
218 |
219 | .reveal pre code {
220 | display: block;
221 | padding: 5px;
222 | overflow: auto;
223 | max-height: 400px;
224 | word-wrap: normal;
225 | }
226 |
227 | .reveal table {
228 | margin: auto;
229 | border-collapse: collapse;
230 | border-spacing: 0;
231 | }
232 |
233 | .reveal table th {
234 | font-weight: bold;
235 | }
236 |
237 | .reveal table th,
238 | .reveal table td {
239 | text-align: left;
240 | padding: 0.2em 0.5em 0.2em 0.5em;
241 | border-bottom: 1px solid;
242 | }
243 |
244 | .reveal table th[align='center'],
245 | .reveal table td[align='center'] {
246 | text-align: center;
247 | }
248 |
249 | .reveal table th[align='right'],
250 | .reveal table td[align='right'] {
251 | text-align: right;
252 | }
253 |
254 | .reveal table tbody tr:last-child th,
255 | .reveal table tbody tr:last-child td {
256 | border-bottom: none;
257 | }
258 |
259 | .reveal sup {
260 | vertical-align: super;
261 | font-size: smaller;
262 | }
263 |
264 | .reveal sub {
265 | vertical-align: sub;
266 | font-size: smaller;
267 | }
268 |
269 | .reveal small {
270 | display: inline-block;
271 | font-size: 0.6em;
272 | line-height: 1.2em;
273 | vertical-align: top;
274 | }
275 |
276 | .reveal small * {
277 | vertical-align: top;
278 | }
279 |
280 | .reveal img {
281 | margin: 20px 0;
282 | }
283 |
284 | /*********************************************
285 | * LINKS
286 | *********************************************/
287 | .reveal a {
288 | color: #2a76dd;
289 | text-decoration: none;
290 | transition: color 0.15s ease;
291 | }
292 |
293 | .reveal a:hover {
294 | color: #6ca0e8;
295 | text-shadow: none;
296 | border: none;
297 | }
298 |
299 | .reveal .roll span:after {
300 | color: #fff;
301 | background: #1a53a1;
302 | }
303 |
304 | /*********************************************
305 | * Frame helper
306 | *********************************************/
307 | .reveal .r-frame {
308 | border: 4px solid #222;
309 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
310 | }
311 |
312 | .reveal a .r-frame {
313 | transition: all 0.15s linear;
314 | }
315 |
316 | .reveal a:hover .r-frame {
317 | border-color: #2a76dd;
318 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
319 | }
320 |
321 | /*********************************************
322 | * NAVIGATION CONTROLS
323 | *********************************************/
324 | .reveal .controls {
325 | color: #2a76dd;
326 | }
327 |
328 | /*********************************************
329 | * PROGRESS BAR
330 | *********************************************/
331 | .reveal .progress {
332 | background: rgba(0, 0, 0, 0.2);
333 | color: #2a76dd;
334 | }
335 |
336 | /*********************************************
337 | * PRINT BACKGROUND
338 | *********************************************/
339 | @media print {
340 | .backgrounds {
341 | background-color: #fff;
342 | }
343 | }
344 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # revealjs-react
2 |
3 | A React wrapper for the RevealJS Presentation Library.
4 |
5 | ## Installation
6 |
7 | `npm install --save revealjs-react`
8 |
9 | ## Usage
10 |
11 | ```jsx
12 | import React from 'react';
13 | import { render } from 'react-dom';
14 | import { RevealJS, Slide, H } from 'revealjs-react';
15 | import RevealHighlight from 'revealjs-react/plugins/highlight';
16 |
17 | render(
18 |
19 |
20 | Hello, World!
21 |
22 | ,
23 | document.querySelector('#root'),
24 | );
25 | ```
26 |
27 | ## Components
28 |
29 | Look at [src/components/](src/components/) for a full list of supported components and their usage (coming soon).
30 |
31 | ## Notes
32 |
33 | The `RevealJS` components supports all the reveal.js config options through props
34 |
35 | ```js
36 | plugins = [],
37 |
38 | // Display presentation control arrows
39 | controls = true,
40 |
41 | // Help the user learn the controls by providing hints, for example by
42 | // bouncing the down arrow when they first encounter a vertical slide
43 | controlsTutorial = true,
44 |
45 | // Determines where controls appear, "edges" or "bottom-right"
46 | controlsLayout = 'bottom-right',
47 |
48 | // Visibility rule for backwards navigation arrows; "faded", "hidden"
49 | // or "visible"
50 | controlsBackArrows = 'faded',
51 |
52 | // Display a presentation progress bar
53 | progress = true,
54 |
55 | // Display the page number of the current slide
56 | // - true = Show slide number
57 | // - false = Hide slide number
58 | //
59 | // Can optionally be set as a string that specifies the number formatting =
60 | // - "h.v" = Horizontal . vertical slide number (default)
61 | // - "h/v" = Horizontal / vertical slide number
62 | // - "c" = Flattened slide number
63 | // - "c/t" = Flattened slide number / total slides
64 | //
65 | // Alternatively, you can provide a function that returns the slide
66 | // number for the current slide. The function should take in a slide
67 | // object and return an array with one string [slideNumber] or
68 | // three strings [n1,delimiter,n2]. See #formatSlideNumber().
69 | slideNumber = false,
70 |
71 | // Can be used to limit the contexts in which the slide number appears
72 | // - "all" = Always show the slide number
73 | // - "print" = Only when printing to PDF
74 | // - "speaker" = Only in the speaker view
75 | showSlideNumber = 'all',
76 |
77 | // Use 1 based indexing for # links to match slide number (default is zero
78 | // based)
79 | hashOneBasedIndex = false,
80 |
81 | // Add the current slide number to the URL hash so that reloading the
82 | // page/copying the URL will return you to the same slide
83 | hash = false,
84 |
85 | // Flags if we should monitor the hash and change slides accordingly
86 | respondToHashChanges = true,
87 |
88 | // Push each slide change to the browser history. Implies `hash = true`
89 | history = false,
90 |
91 | // Enable keyboard shortcuts for navigation
92 | keyboard = true,
93 |
94 | // Optional function that blocks keyboard events when retuning false
95 | //
96 | // If you set this to 'foucsed', we will only capture keyboard events
97 | // for embdedded decks when they are in focus
98 | keyboardCondition = null,
99 |
100 | // Disables the default reveal.js slide layout (scaling and centering)
101 | // so that you can use custom CSS layout
102 | disableLayout = false,
103 |
104 | // Enable the slide overview mode
105 | overview = true,
106 |
107 | // Vertical centering of slides
108 | center = true,
109 |
110 | // Enables touch navigation on devices with touch input
111 | touch = true,
112 |
113 | // Loop the presentation
114 | loop = false,
115 |
116 | // Change the presentation direction to be RTL
117 | rtl = false,
118 |
119 | // Changes the behavior of our navigation directions.
120 | //
121 | // "default"
122 | // Left/right arrow keys step between horizontal slides, up/down
123 | // arrow keys step between vertical slides. Space key steps through
124 | // all slides (both horizontal and vertical).
125 | //
126 | // "linear"
127 | // Removes the up/down arrows. Left/right arrows step through all
128 | // slides (both horizontal and vertical).
129 | //
130 | // "grid"
131 | // When this is enabled, stepping left/right from a vertical stack
132 | // to an adjacent vertical stack will land you at the same vertical
133 | // index.
134 | //
135 | // Consider a deck with six slides ordered in two vertical stacks =
136 | // 1.1 2.1
137 | // 1.2 2.2
138 | // 1.3 2.3
139 | //
140 | // If you're on slide 1.3 and navigate right, you will normally move
141 | // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
142 | // from 1.3 -> 2.3.
143 | navigationMode = 'default',
144 |
145 | // Randomizes the order of slides each time the presentation loads
146 | shuffle = false,
147 |
148 | // Turns fragments on and off globally
149 | fragments = true,
150 |
151 | // Flags whether to include the current fragment in the URL,
152 | // so that reloading brings you to the same fragment position
153 | fragmentInURL = true,
154 |
155 | // Flags if the presentation is running in an embedded mode,
156 | // i.e. contained within a limited portion of the screen
157 | embedded = false,
158 |
159 | // Flags if we should show a help overlay when the question-mark
160 | // key is pressed
161 | help = true,
162 |
163 | // Flags if it should be possible to pause the presentation (blackout)
164 | pause = true,
165 |
166 | // Flags if speaker notes should be visible to all viewers
167 | showNotes = false,
168 |
169 | // Global override for autolaying embedded media (video/audio/iframe)
170 | // - null = Media will only autoplay if data-autoplay is present
171 | // - true = All media will autoplay, regardless of individual setting
172 | // - false = No media will autoplay, regardless of individual setting
173 | autoPlayMedia = null,
174 |
175 | // Global override for preloading lazy-loaded iframes
176 | // - null = Iframes with data-src AND data-preload will be loaded when within
177 | // the viewDistance, iframes with only data-src will be loaded when visible
178 | // - true = All iframes with data-src will be loaded when within the viewDistance
179 | // - false = All iframes with data-src will be loaded only when visible
180 | preloadIframes = null,
181 |
182 | // Can be used to globally disable auto-animation
183 | autoAnimate = true,
184 |
185 | // Optionally provide a custom element matcher that will be
186 | // used to dictate which elements we can animate between.
187 | autoAnimateMatcher = null,
188 |
189 | // Default settings for our auto-animate transitions, can be
190 | // overridden per-slide or per-element via data arguments
191 | autoAnimateEasing = 'ease',
192 | autoAnimateDuration = 1.0,
193 | autoAnimateUnmatched = true,
194 |
195 | // CSS properties that can be auto-animated. Position & scale
196 | // is matched separately so there's no need to include styles
197 | // like top/right/bottom/left, width/height or margin.
198 | autoAnimateStyles = [
199 | 'opacity',
200 | 'color',
201 | 'background-color',
202 | 'padding',
203 | 'font-size',
204 | 'line-height',
205 | 'letter-spacing',
206 | 'border-width',
207 | 'border-color',
208 | 'border-radius',
209 | 'outline',
210 | 'outline-offset',
211 | ],
212 |
213 | // Controls automatic progression to the next slide
214 | // - 0 = Auto-sliding only happens if the data-autoslide HTML attribute
215 | // is present on the current slide or fragment
216 | // - 1+ = All slides will progress automatically at the given interval
217 | // - false = No auto-sliding, even if data-autoslide is present
218 | autoSlide = 0,
219 |
220 | // Stop auto-sliding after user input
221 | autoSlideStoppable = true,
222 |
223 | // Use this method for navigation when auto-sliding (defaults to navigateNext)
224 | autoSlideMethod = null,
225 |
226 | // Specify the average time in seconds that you think you will spend
227 | // presenting each slide. This is used to show a pacing timer in the
228 | // speaker view
229 | defaultTiming = null,
230 |
231 | // Enable slide navigation via mouse wheel
232 | mouseWheel = false,
233 |
234 | // Opens links in an iframe preview overlay
235 | // Add `data-preview-link` and `data-preview-link="false"` to customise each link
236 | // individually
237 | previewLinks = false,
238 |
239 | // Exposes the reveal.js API through window.postMessage
240 | postMessage = true,
241 |
242 | // Dispatches all reveal.js events to the parent window through postMessage
243 | postMessageEvents = false,
244 |
245 | // Focuses body when page changes visibility to ensure keyboard shortcuts work
246 | focusBodyOnPageVisibilityChange = true,
247 |
248 | // Transition style
249 | transition = 'slide', // none/fade/slide/convex/concave/zoom
250 |
251 | // Transition speed
252 | transitionSpeed = 'default', // default/fast/slow
253 |
254 | // Transition style for full page slide backgrounds
255 | backgroundTransition = 'fade', // none/fade/slide/convex/concave/zoom
256 |
257 | // The maximum number of pages a single slide can expand onto when printing
258 | // to PDF, unlimited by default
259 | pdfMaxPagesPerSlide = Number.POSITIVE_INFINITY,
260 |
261 | // Prints each fragment on a separate slide
262 | pdfSeparateFragments = true,
263 |
264 | // Offset used to reduce the height of content within exported PDF pages.
265 | // This exists to account for environment differences based on how you
266 | // print to PDF. CLI printing options, like phantomjs and wkpdf, can end
267 | // on precisely the total height of the document whereas in-browser
268 | // printing has to end one pixel before.
269 | pdfPageHeightOffset = -1,
270 |
271 | // Number of slides away from the current that are visible
272 | viewDistance = 3,
273 |
274 | // Number of slides away from the current that are visible on mobile
275 | // devices. It is advisable to set this to a lower number than
276 | // viewDistance in order to save resources.
277 | mobileViewDistance = 2,
278 |
279 | // The display mode that will be used to show slides
280 | display = 'block',
281 |
282 | // Hide cursor if inactive
283 | hideInactiveCursor = true,
284 |
285 | // Time before the cursor is hidden (in ms)
286 | hideCursorTime = 5000,
287 |
288 | // Parallax background image
289 | parallaxBackgroundImage = '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"
290 |
291 | // Parallax background size
292 | parallaxBackgroundSize = '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
293 |
294 | // Number of pixels to move the parallax background per slide
295 | // - Calculated automatically unless specified
296 | // - Set to 0 to disable movement along an axis
297 | parallaxBackgroundHorizontal = 200,
298 | parallaxBackgroundVertical = 50,
299 |
300 | // The "normal" size of the presentation, aspect ratio will
301 | // be preserved when the presentation is scaled to fit different
302 | // resolutions. Can be specified using percentage units.
303 | width = 960,
304 | height = 700,
305 |
306 | // Factor of the display size that should remain empty around
307 | // the content
308 | margin = 0.04,
309 |
310 | // Bounds for smallest/largest possible scale to apply to content
311 | minScale = 0.2,
312 | maxScale = 2.0,
313 | ```
314 |
--------------------------------------------------------------------------------
/src/components/reveal.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import Reveal from 'reveal.js';
3 |
4 | // Styles
5 | import 'reveal.js/dist/reveal.css';
6 |
7 | function RevealJS({
8 | children,
9 |
10 | plugins = [],
11 |
12 | // Display presentation control arrows
13 | controls = true,
14 |
15 | // Help the user learn the controls by providing hints, for example by
16 | // bouncing the down arrow when they first encounter a vertical slide
17 | controlsTutorial = true,
18 |
19 | // Determines where controls appear, "edges" or "bottom-right"
20 | controlsLayout = 'bottom-right',
21 |
22 | // Visibility rule for backwards navigation arrows; "faded", "hidden"
23 | // or "visible"
24 | controlsBackArrows = 'faded',
25 |
26 | // Display a presentation progress bar
27 | progress = true,
28 |
29 | // Display the page number of the current slide
30 | // - true = Show slide number
31 | // - false = Hide slide number
32 | //
33 | // Can optionally be set as a string that specifies the number formatting =
34 | // - "h.v" = Horizontal . vertical slide number (default)
35 | // - "h/v" = Horizontal / vertical slide number
36 | // - "c" = Flattened slide number
37 | // - "c/t" = Flattened slide number / total slides
38 | //
39 | // Alternatively, you can provide a function that returns the slide
40 | // number for the current slide. The function should take in a slide
41 | // object and return an array with one string [slideNumber] or
42 | // three strings [n1,delimiter,n2]. See #formatSlideNumber().
43 | slideNumber = false,
44 |
45 | // Can be used to limit the contexts in which the slide number appears
46 | // - "all" = Always show the slide number
47 | // - "print" = Only when printing to PDF
48 | // - "speaker" = Only in the speaker view
49 | showSlideNumber = 'all',
50 |
51 | // Use 1 based indexing for # links to match slide number (default is zero
52 | // based)
53 | hashOneBasedIndex = false,
54 |
55 | // Add the current slide number to the URL hash so that reloading the
56 | // page/copying the URL will return you to the same slide
57 | hash = false,
58 |
59 | // Flags if we should monitor the hash and change slides accordingly
60 | respondToHashChanges = true,
61 |
62 | // Push each slide change to the browser history. Implies `hash = true`
63 | history = false,
64 |
65 | // Enable keyboard shortcuts for navigation
66 | keyboard = true,
67 |
68 | // Optional function that blocks keyboard events when retuning false
69 | //
70 | // If you set this to 'foucsed', we will only capture keyboard events
71 | // for embdedded decks when they are in focus
72 | keyboardCondition = null,
73 |
74 | // Disables the default reveal.js slide layout (scaling and centering)
75 | // so that you can use custom CSS layout
76 | disableLayout = false,
77 |
78 | // Enable the slide overview mode
79 | overview = true,
80 |
81 | // Vertical centering of slides
82 | center = true,
83 |
84 | // Enables touch navigation on devices with touch input
85 | touch = true,
86 |
87 | // Loop the presentation
88 | loop = false,
89 |
90 | // Change the presentation direction to be RTL
91 | rtl = false,
92 |
93 | // Changes the behavior of our navigation directions.
94 | //
95 | // "default"
96 | // Left/right arrow keys step between horizontal slides, up/down
97 | // arrow keys step between vertical slides. Space key steps through
98 | // all slides (both horizontal and vertical).
99 | //
100 | // "linear"
101 | // Removes the up/down arrows. Left/right arrows step through all
102 | // slides (both horizontal and vertical).
103 | //
104 | // "grid"
105 | // When this is enabled, stepping left/right from a vertical stack
106 | // to an adjacent vertical stack will land you at the same vertical
107 | // index.
108 | //
109 | // Consider a deck with six slides ordered in two vertical stacks =
110 | // 1.1 2.1
111 | // 1.2 2.2
112 | // 1.3 2.3
113 | //
114 | // If you're on slide 1.3 and navigate right, you will normally move
115 | // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
116 | // from 1.3 -> 2.3.
117 | navigationMode = 'default',
118 |
119 | // Randomizes the order of slides each time the presentation loads
120 | shuffle = false,
121 |
122 | // Turns fragments on and off globally
123 | fragments = true,
124 |
125 | // Flags whether to include the current fragment in the URL,
126 | // so that reloading brings you to the same fragment position
127 | fragmentInURL = true,
128 |
129 | // Flags if the presentation is running in an embedded mode,
130 | // i.e. contained within a limited portion of the screen
131 | embedded = false,
132 |
133 | // Flags if we should show a help overlay when the question-mark
134 | // key is pressed
135 | help = true,
136 |
137 | // Flags if it should be possible to pause the presentation (blackout)
138 | pause = true,
139 |
140 | // Flags if speaker notes should be visible to all viewers
141 | showNotes = false,
142 |
143 | // Global override for autolaying embedded media (video/audio/iframe)
144 | // - null = Media will only autoplay if data-autoplay is present
145 | // - true = All media will autoplay, regardless of individual setting
146 | // - false = No media will autoplay, regardless of individual setting
147 | autoPlayMedia = null,
148 |
149 | // Global override for preloading lazy-loaded iframes
150 | // - null = Iframes with data-src AND data-preload will be loaded when within
151 | // the viewDistance, iframes with only data-src will be loaded when visible
152 | // - true = All iframes with data-src will be loaded when within the viewDistance
153 | // - false = All iframes with data-src will be loaded only when visible
154 | preloadIframes = null,
155 |
156 | // Can be used to globally disable auto-animation
157 | autoAnimate = true,
158 |
159 | // Optionally provide a custom element matcher that will be
160 | // used to dictate which elements we can animate between.
161 | autoAnimateMatcher = null,
162 |
163 | // Default settings for our auto-animate transitions, can be
164 | // overridden per-slide or per-element via data arguments
165 | autoAnimateEasing = 'ease',
166 | autoAnimateDuration = 1.0,
167 | autoAnimateUnmatched = true,
168 |
169 | // CSS properties that can be auto-animated. Position & scale
170 | // is matched separately so there's no need to include styles
171 | // like top/right/bottom/left, width/height or margin.
172 | autoAnimateStyles = [
173 | 'opacity',
174 | 'color',
175 | 'background-color',
176 | 'padding',
177 | 'font-size',
178 | 'line-height',
179 | 'letter-spacing',
180 | 'border-width',
181 | 'border-color',
182 | 'border-radius',
183 | 'outline',
184 | 'outline-offset',
185 | ],
186 |
187 | // Controls automatic progression to the next slide
188 | // - 0 = Auto-sliding only happens if the data-autoslide HTML attribute
189 | // is present on the current slide or fragment
190 | // - 1+ = All slides will progress automatically at the given interval
191 | // - false = No auto-sliding, even if data-autoslide is present
192 | autoSlide = 0,
193 |
194 | // Stop auto-sliding after user input
195 | autoSlideStoppable = true,
196 |
197 | // Use this method for navigation when auto-sliding (defaults to navigateNext)
198 | autoSlideMethod = null,
199 |
200 | // Specify the average time in seconds that you think you will spend
201 | // presenting each slide. This is used to show a pacing timer in the
202 | // speaker view
203 | defaultTiming = null,
204 |
205 | // Enable slide navigation via mouse wheel
206 | mouseWheel = false,
207 |
208 | // Opens links in an iframe preview overlay
209 | // Add `data-preview-link` and `data-preview-link="false"` to customise each link
210 | // individually
211 | previewLinks = false,
212 |
213 | // Exposes the reveal.js API through window.postMessage
214 | postMessage = true,
215 |
216 | // Dispatches all reveal.js events to the parent window through postMessage
217 | postMessageEvents = false,
218 |
219 | // Focuses body when page changes visibility to ensure keyboard shortcuts work
220 | focusBodyOnPageVisibilityChange = true,
221 |
222 | // Transition style
223 | transition = 'slide', // none/fade/slide/convex/concave/zoom
224 |
225 | // Transition speed
226 | transitionSpeed = 'default', // default/fast/slow
227 |
228 | // Transition style for full page slide backgrounds
229 | backgroundTransition = 'fade', // none/fade/slide/convex/concave/zoom
230 |
231 | // The maximum number of pages a single slide can expand onto when printing
232 | // to PDF, unlimited by default
233 | pdfMaxPagesPerSlide = Number.POSITIVE_INFINITY,
234 |
235 | // Prints each fragment on a separate slide
236 | pdfSeparateFragments = true,
237 |
238 | // Offset used to reduce the height of content within exported PDF pages.
239 | // This exists to account for environment differences based on how you
240 | // print to PDF. CLI printing options, like phantomjs and wkpdf, can end
241 | // on precisely the total height of the document whereas in-browser
242 | // printing has to end one pixel before.
243 | pdfPageHeightOffset = -1,
244 |
245 | // Number of slides away from the current that are visible
246 | viewDistance = 3,
247 |
248 | // Number of slides away from the current that are visible on mobile
249 | // devices. It is advisable to set this to a lower number than
250 | // viewDistance in order to save resources.
251 | mobileViewDistance = 2,
252 |
253 | // The display mode that will be used to show slides
254 | display = 'block',
255 |
256 | // Hide cursor if inactive
257 | hideInactiveCursor = true,
258 |
259 | // Time before the cursor is hidden (in ms)
260 | hideCursorTime = 5000,
261 |
262 | // Parallax background image
263 | parallaxBackgroundImage = '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"
264 |
265 | // Parallax background size
266 | parallaxBackgroundSize = '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
267 |
268 | // Number of pixels to move the parallax background per slide
269 | // - Calculated automatically unless specified
270 | // - Set to 0 to disable movement along an axis
271 | parallaxBackgroundHorizontal = 200,
272 | parallaxBackgroundVertical = 50,
273 |
274 | // The "normal" size of the presentation, aspect ratio will
275 | // be preserved when the presentation is scaled to fit different
276 | // resolutions. Can be specified using percentage units.
277 | width = 960,
278 | height = 700,
279 |
280 | // Factor of the display size that should remain empty around
281 | // the content
282 | margin = 0.04,
283 |
284 | // Bounds for smallest/largest possible scale to apply to content
285 | minScale = 0.2,
286 | maxScale = 2.0,
287 | }) {
288 | useEffect(() => {
289 | const deck = new Reveal({
290 | plugins,
291 |
292 | controls,
293 | controlsTutorial,
294 | controlsLayout,
295 | controlsBackArrows,
296 | progress,
297 | slideNumber,
298 | showSlideNumber,
299 | hashOneBasedIndex,
300 | hash,
301 | respondToHashChanges,
302 | history,
303 | keyboard,
304 | keyboardCondition,
305 | disableLayout,
306 | overview,
307 | center,
308 | touch,
309 | loop,
310 | rtl,
311 | navigationMode,
312 | shuffle,
313 | fragments,
314 | fragmentInURL,
315 | embedded,
316 | help,
317 | pause,
318 | showNotes,
319 | autoPlayMedia,
320 | preloadIframes,
321 | autoAnimate,
322 | autoAnimateMatcher,
323 | autoAnimateEasing,
324 | autoAnimateDuration,
325 | autoAnimateUnmatched,
326 | autoAnimateStyles,
327 | autoSlide,
328 | autoSlideStoppable,
329 | autoSlideMethod,
330 | defaultTiming,
331 | mouseWheel,
332 | previewLinks,
333 | postMessage,
334 | postMessageEvents,
335 | focusBodyOnPageVisibilityChange,
336 | transition,
337 | transitionSpeed,
338 | backgroundTransition,
339 | pdfMaxPagesPerSlide,
340 | pdfSeparateFragments,
341 | pdfPageHeightOffset,
342 | viewDistance,
343 | mobileViewDistance,
344 | display,
345 | hideInactiveCursor,
346 | hideCursorTime,
347 | parallaxBackgroundImage,
348 | parallaxBackgroundSize,
349 | parallaxBackgroundHorizontal,
350 | parallaxBackgroundVertical,
351 | width,
352 | height,
353 | margin,
354 | minScale,
355 | maxScale,
356 | });
357 |
358 | deck.initialize();
359 | });
360 |
361 | return {children}
;
362 | }
363 |
364 | export default RevealJS;
365 |
--------------------------------------------------------------------------------