├── .babelrc ├── .eslintrc.json ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── index.esm.js ├── index.esm.js.map ├── index.js ├── index.js.map ├── package-lock.json ├── package.json ├── plugins ├── highlight.esm.js ├── highlight.js ├── math.esm.js ├── math.js ├── notes.esm.js ├── notes.js ├── search.esm.js ├── search.js ├── zoom.esm.js └── zoom.js ├── rollup.config.js ├── src ├── components │ ├── audio.js │ ├── blockquote.js │ ├── code.js │ ├── div.js │ ├── figcaption.js │ ├── figure.js │ ├── footer.js │ ├── h.js │ ├── header.js │ ├── iframe.js │ ├── image.js │ ├── li.js │ ├── link.js │ ├── main.js │ ├── note.js │ ├── ol.js │ ├── p.js │ ├── reveal.js │ ├── slide.js │ ├── span.js │ ├── ul.js │ └── video.js └── index.js ├── test ├── index.html ├── index.jsx ├── monokai.css └── theme.css └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | test/bundle.js -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "jsxSingleQuote": false, 5 | "singleQuote": true, 6 | "trailingComma": "all" 7 | } 8 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 |