How to embed RevealJS in React Project

[azeenGAN]

`Create` new component for your Presentation:

Install RevealJS via npm 

//markup approach

1) Import:
import React, {useState, useEffect } from 'react';
import Reveal from 'reveal.js';
import '/node_modules/reveal.js/dist/reveal.css'; //importing Css
import '/node_modules/reveal.js/dist/theme/dracula.css' //importing theme change dracula.css with your desired theme

2) Make component and initialize:

export default function Pres() {
  useEffect(() => {
    try {
      let deck = new Reveal({});
      deck.initialize({ embedded: true, autoPlayMedia: true });    //By default embedded set to False in configuration you have to turn it into true to scroll the page otherwise your page will not scroll (Bcz due to this flag our Presentation will be contained within a limited portion of the screen)

    } catch (error) {
      console.error("Error initializing Reveal:", error.message); //Error handling
    }
  }, []);

  
    const [videoError, setVideoError] = useState(false);
  
    const handleVideoError = () => {
      setVideoError(true);
    };




3) make presentation:
it is compulsary to give height to reveal tag otherwise it will not show.

  return ( <>
   <div className="reveal" style={{ height: "400px" }}> 
      <div className="slides">
        <section style={{ height: "400px" }} ><h2 className="r-fit-text">Sukoon</h2>
          <h2 className="r-fit-text">We are here to serve</h2></section>
        <section>
          <section ><p >sukoon makes no guarantees for prices advertised on our site and application.</p><a href="#reveal">
            <img className="r-frame " src={process.env.PUBLIC_URL + '/android-chrome-512x512.png'} style={{ borderRadius: "50px" }} width="250" alt='sukoon' />
          </a><p><a style={{textDecoration:"underline"}} href="https://www.siteminder.com/r/hotel-fees/">Guide to hotel fees and surcharges for hotels</a></p></section>

          <section ><h2 style={{ color: "#34E0A1" }}>Book with us</h2>
          {!videoError && ( //conditional rendering
        <video
          style={{ borderRadius: '10px' }}
          muted
          controls
          onError={handleVideoError}
          src="/Travel-video.mp4"
        ></video>  )}
            <p style={{ margin: "10px", color: "#ffaedc", fontFamily: "impact" }} className="fragment fade-up">Fill the form and receive mail from us!!</p>
          </section>
        </section>
        <section data-auto-animate data-auto-animate-id="two"><p style={{ fontStyle: "oblique", color: "#BD93F9" }}>AtSukoon, we want to ensure our platform works for all travelers, that's why we are committed to making our website and app accessible to everyone. We are in a constant pursuit of integrating accessibility into the core of everything we design and build.</p></section>
        <section data-auto-animate data-auto-animate-id="two"><p style={{ fontStyle: "oblique", color: "#10B981" }}>At Tripadvisor, we want to ensure our platform works for all travelers, that's why we are committed to making our website and app accessible to everyone. We are in a constant pursuit of integrating accessibility into the core of everything we design and build.</p>
          <h3>[email protected]</h3></section>

      </div>
    </div>

  </>)
}

4) Import this (pres) component in the file you are hoping to use:
I am using it in my about page :

import Pres from './Pres';

export default function About() {

 return (
    <>

      <Pres />
      </>
  );
}

5) In smaller screens I recommend you to decrease thee initial scale of the page in which you are using reveal pres for responsiveness.

 useEffect(() => {



    const setInitialScale = () => {
      const viewportMeta = document.querySelector('meta[name="viewport"]');
      
      if (window.innerWidth < 767) {
        // Set initial scale to 0.7 for devices with width <= 767px
        viewportMeta.setAttribute('content', 'width=device-width, initial-scale=0.6'); 
      } else {
        // Set original scale for other devices
        viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1');
        }
    };
    
    Note: RevealJs is not meant to be used in the projects its a presentation framework covering whole screen.
    
If you are still unclear then see how I used reveal JS in my real deployed project: https://github.com/azeenGAN/Sukoon-travel-App/tree/cc1f006bddb46897c839ad6d01937f9028d57554/react-project%20Front-end/src/Mycomponents