bouzidanas / react-reveal-slides

Create and add reveal.js presentations in react

Hi there, I'm Anas 👋

A little about me...

• 🔭 I’m currently exploring the exciting realms of React and UI design, combining my passion for frontend development with creating beautiful and intuitive user interfaces.
• 🌱 I’m currently learning about the various ways other creative minds are using threejs to create fresh and engaging user experiences.
• 👯 I’m looking to collaborate on further developing rhp, a charting component library built entirely in React and designed with web devs in mind.
• 💬 Ask me about designing and developing in-house and open-source tools for developers and scientists alike, with a focus on Data Visualization 📊.

Languages and tools I have used before (or am currently using) include...

Backend

Frontend

Packaging

---

My Github stats...

react-reveal-slides's Issues

Changing the theme is not working

Sorry about the issue rapid-fire! This is the last in a while, hopefully.

I tried chaning the theme prop to beige and white, but I don't think it's working. Once I remove the data-background-color from the default example, everything is white, but I've seen the default theme is actually black.

Using the <link/> tag as they mention in the docs does not work either, but this is most likely related to the bundler. Importing the theme directly at the App entry point works fine.

import '../node_modules/reveal.js/dist/theme/beige.css';

Code line highlighting has low opacity

I tried following this guide to show a code block with highlighted lines but the opacity is very low for unknown reasons... The problem only appears when using React. When I make a simple html file with RevealJS it's working as expected.

Here's what it should look like:

Here's what it looks like (the colors are not the same because I use a different theme. Switching to other theme did not fix the issue):

And here's what it looks like when I disable line highlighting:

I tried to inspect the lines to see if there was a css property lowering the opacity but I didn't find any. Mind you, I'm not used to HighlightJS so I may have missed something.

Here's the full code:

import { RevealSlides } from "react-reveal-slides";

// Make sure reveal.js is installed with npm for the following imports to work
// Plugins
import RevealNotes from "reveal.js/plugin/notes/notes";
import RevealZoom from "reveal.js/plugin/zoom/zoom";
import RevealHighlight from "reveal.js/plugin/highlight/highlight";

import "reveal.js/dist/theme/black.css";
import "reveal.js/plugin/highlight/monokai.css";

function App() {
  return (
    <div
      style={{
        height: "100vh",
        width: "100vw",
      }}
    >
      <RevealSlides
        controls={true}
        plugins={[RevealZoom, RevealNotes, RevealHighlight]}
        onStateChange={(state) => console.log(state)}
      >
        <section>
          <pre>
            <code data-trim data-noescape data-line-numbers="3,8-10">
              {`<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
</table>`}
            </code>
          </pre>
        </section>
      </RevealSlides>
    </div>
  );
}

export default App;

Thanks for the help!

Unrelated:
Why's there a 1 to the left of the line numbers column? I can open an other issue if you'd prefer..?

Not working

I can't use this library, nothing but a black window

[Feat] useReveal state hook

It might be a bit early, but writing this in case you take suggestions at this stage. Feel free to move it to a discussion instead, since this is not an issue.

It might be interesting to expose a useReveal (or whatever name) hook that keeps an up-to-date RevealState object. This is only convenient when slides are kept as separate components, though it's likely the first thing any React developer will do. You already made it easy by exposing the onStateChange prop. Wrapping the RevealSlides children with a regular Context should do the trick.

I'm using this along with framer-motion to have a bit more control over some animations and I found it convenient to have easy access to the state. I don't know a lot about Reveal.js, so maybe there is a more native way to do complex animations.

Module parse failed: Unexpected token

I tried using the library in a bare next js app and it won't compile

"dependencies": { "next": "14.2.5", "react": "^18", "react-dom": "^18", "react-reveal-slides": "github:bouzidanas/react-reveal-slides", "reveal.js": "^5.1.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "@types/reveal.js": "^5.0.3", "eslint": "^8", "eslint-config-next": "14.2.5", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" }

Not working in production build

I made a basic React (SWC) project using Vite.

I have the following main.tsx:

import { RevealSlides } from "react-reveal-slides";

// Make sure reveal.js is installed with npm for the following imports to work
// Plugins
import RevealNotes from "reveal.js/plugin/notes/notes";
import RevealZoom from "reveal.js/plugin/zoom/zoom";

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <div className="h-screen">
      <App />
    </div>
  </StrictMode>
);

function App() {
  return (
    <RevealSlides
      controls={false}
      plugins={[RevealZoom, RevealNotes]}
      onStateChange={(state) => console.log(state)}
    >
      <section key="0" data-background-color="#0c1821">
        <section key="0-0">
          <h2>react-reveal-slides</h2>
          <p>Create dynamic Reveal.js slides</p>
        </section>
        <section key="0-1">
          <ul>
            <li className="fragment">
              Easily make presentation content dynamic
            </li>
            <li className="fragment">Easily add presentations to React apps</li>
            <li className="fragment">
              Embed React components inside presentations
            </li>
          </ul>
        </section>
      </section>
      <section key="1" data-background-color="#bf4f41">
        <section key="1-0">
          <h2>Free reign over your presentation</h2>
          <p>
            This package makes no efforts to impead or restrict what you can do.
          </p>
        </section>
        <section key="1-1">
          <p>
            Since React creates HTML DOM elements out of JSX, there should be no
            reason we cant just put JSX inside of our RevealSlides component
            instead of the HTML markup Reveal.js normally expects.
          </p>
        </section>
        <section key="1-2">
          <p>
            Simply put, React already takes care of converting JSX into
            something Reveal.js can work with.
          </p>
          <aside className="notes">Shhh, these are your private notes 📝</aside>
        </section>
      </section>
    </RevealSlides>
  );
}

When I run npm run dev it works correctly but when I build the project nothing is shown.

I run:

npm run build
npm run preview

I get:

Thanks for the help :)

Installing from GitHub does not bundle the package (install + build)

On a new project, just copy-pasted the example in the README and got the following error when running pnpm dev.

Could not resolve import("../node_modules/reveal.js/dist/theme/**/*.css")

    node_modules/.pnpm/github.com+bouzidanas+react-reveal-slides@3e0a0a560b8babbe1897c95c758cb9a9eacfb8a1/node_modules/react-reveal-slides/src/Reveal.tsx:492:15:
      492 │         import(`../node_modules/reveal.js/dist/theme/${theme}.css`)
          ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

It seems installing from GitHub does not bundle the package. I've also tried with npm and it leads to the same outcome. Is it possible that I'm missing something? Normally, I would expect the package manager to handle the install and build step.

As a workaround, I added a postinstall script to my package.json, but it's not ideal and the docs do not suggest this is necessary.

"postinstall": "cd ./node_modules/react-reveal-slides && npm i && npm run build"

Relevant dependencies:

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-reveal-slides": "github:bouzidanas/react-reveal-slides",
"reveal.js": "^5.1.0"
"typescript": "^5.2.2",
"vite": "^5.2.0"