presentation in react

ReactJS Powered Presentation Framework

ReactJS based Presentation Library.

Getting Started

The new best way to get started is by running create-react-app my-presentation --scripts-version spectacle-scripts . This will use create-react-app to create almost everything you need. This however, doesn't include publish scripts, and ejecting is required for fancy stuff.

The second best way to get started is by using the Spectacle Boilerplate .

Alternatively, you can npm install spectacle and write your own build configurations. We also provide full UMD builds (with a Spectacle global variable) of the library at dist/spectacle.js and dist/spectacle.min.js for more general use cases. You could, for example, include the library via a script tag with: https://unpkg.com/spectacle@VERSION/dist/spectacle.min.js .

Note that we have webpack externals for react , react-dom , and prop-types , so you will need to provide them in your upstream build or something like linking in via script tags in your HTML page for all three libraries. This comports with our project dependencies which place these three libraries in peerDependencies .

But really, it is SO much easier to just use the boilerplate. Trust me.

To aid with speedy development / kicking the tires on spectacle, we support using a simple boilerplate HTML page with a bespoke script tag that contains your entire presentation. The rest of the setup will take care of transpiling your React/ESnext code, providing Spectacle, React, and ReactDOM libraries, and being raring to go with a minimum of effort.

We can start with this project's sample at one-page.html . It's essentially, the same presentation as the fully-built-from-source version, with a few notable exceptions:

There are no import s or require s. Everything must come from the global namespace. This includes Spectacle , React , ReactDOM and all the Spectacle exports from ./src/index.js -- Deck , Slide , themes , etc.

The presentation must include exactly one script tag with the type text/spectacle that is a function. Presently, that function is directly inserted inline into a wrapper code boilerplate as a React Component render function. The wrapper is transpiled. There should not be any extraneous content around it like outer variables or comments.

Good examples:

Bad examples of what not to do:

... with those guidelines in mind, here's the boilerplate that you can literally copy-and-paste into an HTML file and start a Spectacle presentation that works from the get go!

Development

After downloading the boilerplate, your first order of business is to open terminal and run npm install

Next run rm -R .git to remove the existing version control.

Then, to start up the local server, run npm start

Open a browser and hit http://localhost:3000 , and we are ready to roll

Build & Deployment

Building the dist version of the slides is as easy as running npm run build:dist

If you want to deploy the slideshow to surge, run npm run deploy

⚠️ If you are deploying the dist version to GitHub Pages , note that the built bundle uses an absolute path to the /dist/ directory while GitHub Pages requires the relative ./dist/ to find any embedded assets and/or images. A very hacky way to fix this is to edit one place in the produced bundle, as shown in this GitHub issue .

Spectacle comes with a built in presenter mode. It shows you a slide lookahead, current time and your current slide:

Otherwise, it can also show you a stopwatch to count the elapsed time:

To present:

• Run npm start
• Open two browser windows on two different screens
• On your screen visit http://localhost:3000/ . You will be redirected to a URL containing the slide id.
• Add presenter& or presenter&timer immediately after the questionmark, e.g.: http://localhost:3000/#/0?presenter or http://localhost:3000/#/0?presenter&timer
• On the presentation screen visit http://localhost:3000/
• Give an amazingly stylish presentation

Note: Any windows/tabs in the same browser that are running Spectacle will sync to one another, even if you don't want to use presentation mode

Check it out:

You can toggle the presenter or overview mode by pressing respectively alt+p and alt+o .

Fullscreen can be toggled via browser options, or by hovering over the bottom right corner of your window until the fullscreen icon appears and clicking it .

Exporting a totally sweet looking PDF from your totally sweet looking Spectacle presentation is absurdly easy. You can either do this via the browser, or from the command line:

• Run npm install spectacle-renderer -g
• Run npm start on your project and wait for it to build and be available
• Run spectacle-renderer
• A totally cool PDF is created in your project directory

For more options and configuration of this tool, check out:

https://github.com/FormidableLabs/spectacle-renderer

• Open http://localhost:3000/
• Add export& after the ? on the URL of page you are redirected to, e.g.: http://localhost:3000/#/?export&_k=wbyhif
• Bring up the print dialog (ctrl or cmd + p)
• Check "Background Graphics" to on if you are about that life
• Change destination to "Save as PDF", as shown below:

If you want to print your slides, and want a printer friendly version, simply repeat the above process but instead print from http://localhost:3000/?export&print

Basic Concepts

Your presentation files & assets will live in the presentation folder.

The main .js file you write your deck in is /presentation/index.js

Check it out here in the boilerplate.

Here is where you can use the library's tags to compose your presentation. While you can use any JSX syntax here, building your presentation with the supplied tags allows for theming to work properly.

The bare minimum you need to start is a Deck element and a Slide element. Each Slide element represents a slide inside of your slideshow.

In Spectacle, themes are functions that return style objects for screen & print .

You can import the default theme from:

Or create your own based upon the source.

index.js is what you would edit in order to create a custom theme of your own, using object based styles.

You will want to edit index.html to include any web fonts or additional CSS that your theme requires.

createTheme(colors, fonts)

Spectacle's functional theme system allows you to pass in color and font variables that you can use on your elements. The fonts configuration object can take a string for a system font or an object that specifies it‘s a Google Font. If you use a Google Font you can provide a styles array for loading different weights and variations. Google Font tags will be automatically created. See the example below:

The returned theme object can then be passed to the Deck tag via the theme prop, and will override the default styles.

A collection of easy to use charts for your React applications

Animated shuffling of child components on change, you might also like..., fast interface building for react, the html-first framework. instant apps of any size with ~ 1kb js, flexible, framework-agnostic static site generation for sites and spas built with vite, subscribe to react.js examples.

Get the latest posts delivered right to your inbox

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Create PowerPoint presentations with React

wyozi/react-pptx

Folders and files.

Repository files navigation

React wrapper for PptxGenJS . Works both in browser and node. Try at https://wyozi.github.io/react-pptx/

ReactPPTX.render(<presentation>): Promise<Buffer>

Asynchronously renders given presentation JSX.

<Preview>

Takes a Presentation component as a child and renders a preview of the presentation. (Used for displaying slides on the client).

<Presentation>

Wraps the whole presentation.

<Slide>

Represents each slide in the presentation.

<Text>

To see examples of the text formatting, see the underlying PptxGenJS documentation .

<Text.Link>

Link to somewhere. Only usable inside <Text> . You must specify either url or slide .

<Text.Bullet>

Bullet or numbered list item. Only usable inside <Text> .

To find out how these look, easiest to just Google .

• 'alphaLcParenBoth'
• 'alphaLcParenR'
• 'alphaLcPeriod'
• 'alphaUcParenBoth'
• 'alphaUcParenR'
• 'alphaUcPeriod'
• 'arabicParenBoth'
• 'arabicParenR'
• 'arabicPeriod'
• 'arabicPlain'
• 'romanLcParenBoth'
• 'romanLcParenR'
• 'romanLcPeriod'
• 'romanUcParenBoth'
• 'romanUcParenR'
• 'romanUcPeriod'

<Image>

Image layer. Images are automatically fetched and embedded into the .pptx files during the rendering phase.

Supports png, jpg, svg, gif and animated gif.

<Shape>

Shape layer.

To find out how these look, easiest to just Google.

• accentBorderCallout1
• accentBorderCallout2
• accentBorderCallout3
• accentCallout1
• accentCallout2
• accentCallout3
• actionButtonBackPrevious
• actionButtonBeginning
• actionButtonBlank
• actionButtonDocument
• actionButtonEnd
• actionButtonForwardNext
• actionButtonHelp
• actionButtonHome
• actionButtonInformation
• actionButtonMovie
• actionButtonReturn
• actionButtonSound
• bentUpArrow
• borderCallout1
• borderCallout2
• borderCallout3
• bracketPair
• circularArrow
• cloudCallout
• curvedDownArrow
• curvedLeftArrow
• curvedRightArrow
• curvedUpArrow
• downArrowCallout
• ellipseRibbon
• ellipseRibbon2
• flowChartAlternateProcess
• flowChartCollate
• flowChartConnector
• flowChartDecision
• flowChartDelay
• flowChartDisplay
• flowChartDocument
• flowChartExtract
• flowChartInputOutput
• flowChartInternalStorage
• flowChartMagneticDisk
• flowChartMagneticDrum
• flowChartMagneticTape
• flowChartManualInput
• flowChartManualOperation
• flowChartMerge
• flowChartMultidocument
• flowChartOfflineStorage
• flowChartOffpageConnector
• flowChartOnlineStorage
• flowChartOr
• flowChartPredefinedProces'flowChartPredefinedProcess',
• flowChartPreparation
• flowChartProcess
• flowChartPunchedCard
• flowChartPunchedTape
• flowChartSort
• flowChartSummingJunction
• flowChartTerminator
• folderCorner
• horizontalScroll
• irregularSeal1
• irregularSeal2
• leftArrowCallout
• leftBracket
• leftCircularArrow
• leftRightArrow
• leftRightArrowCallout
• leftRightCircularArrow
• leftRightRibbon
• leftRightUpArrow
• leftUpArrow
• lightningBolt
• mathMultiply
• mathNotEqual
• nonIsoscelesTrapezoid
• notchedRightArrow
• parallelogram
• quadArrowCallout
• rightArrowCallout
• rightBracket
• round2DiagRect
• round2SameRect
• snip2DiagRect
• snip2SameRect
• snipRoundRect
• stripedRightArrow
• swooshArrow
• upArrowCallout
• upDownArrow
• upDownArrowCallout
• verticalScroll
• wedgeEllipseCallout
• wedgeRectCallout
• wedgeRoundRectCallout

Shapes support complex colors for the backgroundColor property. These are the currently supported complex color types:

• Translucent colors (e.g. rgba(255, 127, 0, 0.5) for orange at 50% opacity)

<Line>

Line layer. Internally uses <Shape> but is separate for convinience.

Credits / Shoutouts

• All the hard work is done in pptxgenjs by Brent Ely
• react-pdf for REPL code
• react-keyed-flatten-children

Releases 37

Used by 149.

Contributors 10

• TypeScript 94.3%
• JavaScript 4.8%

Interested in our next book? Learn more about Building Large-scale JavaScript Web Apps with React

Design Pattern

Container/Presentational Pattern

In React, one way to enforce separation of concerns is by using the Container/Presentational pattern . With this pattern, we can separate the view from the application logic.

Let’s say we want to create an application that fetches 6 dog images, and renders these images on the screen.

Ideally, we want to enforce separation of concerns by separating this process into two parts:

• Presentational Components : Components that care about how data is shown to the user. In this example, that’s the rendering the list of dog images .
• Container Components : Components that care about what data is shown to the user. In this example, that’s fetching the dog images .

Fetching the dog images deals with application logic , whereas displaying the images only deals with the view .

Presentational Component

A presentational component receives its data through props . Its primary function is to simply display the data it receives the way we want them to, including styles, without modifying that data.

Let’s take a look at the example that displays the dog images. When rendering the dog images, we simply want to map over each dog image that was fetched from the API, and render those images. In order to do so, we can create a functional component that receives the data through props , and renders the data it received.

The DogImages component is a presentational component. Presentational components are usually stateless: they do not contain their own React state, unless they need a state for UI purposes. The data they receive, is not altered by the presentational components themselves.

Presentational components receive their data from container components .

Container Components

The primary function of container components is to pass data to presentational components, which they contain . Container components themselves usually don’t render any other components besides the presentational components that care about their data. Since they don’t render anything themselves, they usually do not contain any styling either.

In our example, we want to pass dog images to the DogsImages presentational component. Before being able to do so, we need to fetch the images from an external API. We need to create a container component that fetches this data, and passes this data to the presentational component DogImages in order to display it on the screen.

Combining these two components together makes it possible to separate handling application logic with the view.

In many cases, the Container/Presentational pattern can be replaced with React Hooks. The introduction of Hooks made it easy for developers to add statefulness without needing a container component to provide that state.

Instead of having the data fetching logic in the DogImagesContainer component, we can create a custom hook that fetches the images, and returns the array of dogs.

By using this hook, we no longer need the wrapping DogImagesContainer container component to fetch the data, and send this to the presentational DogImages component. Instead, we can use this hook directly in our presentational DogImages component!

By using the useDogImages hook, we still separated the application logic from the view. We’re simply using the returned data from the useDogImages hook, without modifying that data within the DogImages component.

Hooks make it easy to separate logic and view in a component, just like the Container/Presentational pattern. It saves us the extra layer that was necessary in order to wrap the presentational component within the container component.

There are many benefits to using the Container/Presentational pattern.

The Container/Presentational pattern encourages the separation of concerns. Presentational components can be pure functions which are responsible for the UI, whereas container components are responsible for the state and data of the application. This makes it easy to enforce the separation of concerns.

Presentational components are easily made reusable, as they simply display data without altering this data. We can reuse the presentational components throughout our application for different purposes.

Since presentational components don’t alter the application logic, the appearance of presentational components can easily be altered by someone without knowledge of the codebase, for example a designer. If the presentational component was reused in many parts of the application, the change can be consistent throughout the app.

Testing presentational components is easy, as they are usually pure functions. We know what the components will render based on which data we pass, without having to mock a data store.

The Container/Presentational pattern makes it easy to separate application logic from rendering logic. However, Hooks make it possible to achieve the same result without having to use the Container/Presentational pattern, and without having to rewrite a stateless functional component into a class component.Note that today, we don’t need to create class components to use state anymore.

Although we can still use the Container/Presentational pattern, even with React Hooks, this pattern can easily be an overkill in smaller sized application.

• Presentational and Container Components - Dan Abramov

Create a slide show presentation with React Flow

We recently published the findings from our React Flow 2023 end-of-year survey with an interactive presentation of the key findings, using React Flow itself. There were lots of useful bits built into this slideshow app, so we wanted to share how we built it!

By the end of this tutorial, you will have built a presentation app with

• Support for markdown slides
• Keyboard navigation around the viewport
• Automatic layouting
• Click-drag panning navigation (à la Prezi)

Along the way, you'll learn a bit about the basics of layouting algorithms, creating static flows, and custom nodes.

Once you're done, the app will look like this!

To follow along with this tutorial we'll assume you have a basic understanding of React (opens in a new tab) and React Flow , but if you get stuck on the way feel free to reach out to us on Discord (opens in a new tab) !

Here's the repo with the final code (opens in a new tab) if you'd like to skip ahead or refer to it as we go.

Let's get started!

Setting up the project

We like to recommend using Vite (opens in a new tab) when starting new React Flow projects, and this time we'll use TypeScript too. You can scaffold a new project with the following command:

If you'd prefer to follow along with JavaScript feel free to use the react template instead. You can also follow along in your browser by using our codesandbox templates:

Besides React Flow we only need to pull in one dependency, react-remark (opens in a new tab) , to help us render markdown in our slides.

We'll modify the generated main.tsx to include React Flow's styles, as well as wrap the app in a <ReactFlowProvider /> to make sure we can access the React Flow instance inside our components;

This tutorial is going to gloss over the styling of the app, so feel free to use any CSS framework or styling solution you're familiar with. If you're going to style your app differently from just writing CSS, for example with Styled Components or Tailwind CSS , you can skip the import to index.css .

How you style your app is up to you, but you must always include React Flow's styles! If you don't need the default styles, at a minimum you should include the base styles from reactflow/dist/base.css .

Each slide of our presentation will be a node on the canvas, so let's create a new file Slide.tsx that will be our custom node used to render each slide.

We're setting the slide width and height as constants here (rather than styling the node in CSS) because we'll want access to those dimensions later on. We've also stubbed out the SlideData type so we can properly type the component's props.

The last thing to do is to register our new custom node and show something on the screen.

It's important to remember to define your nodeTypes object outside of the component (or to use React's useMemo hook)! When the nodeTypes object changes, the entire flow is re-rendered.

With the basics put together, you can start the development server by running npm run dev and see the following:

Not super exciting yet, but let's add markdown rendering and create a few slides side by side!

Rendering markdown

We want to make it easy to add content to our slides, so we'd like the ability to write Markdown (opens in a new tab) in our slides. If you're not familiar, Markdown is a simple markup language for creating formatted text documents. If you've ever written a README on GitHub, you've used Markdown!

Thanks to the react-remark package we installed earlier, this step is a simple one. We can use the <Remark /> component to render a string of markdown content into our slides.

In React Flow, nodes can have data stored on them that can be used during rendering. In this case we're storing the markdown content to display by adding a source property to the SlideData type and passing that to the <Remark /> component. We can update our hardcoded nodes with some markdown content to see it in action:

Note that we've added the minZoom prop to the <ReactFlow /> component. Our slides are quite large, and the default minimum zoom level is not enough to zoom out and see multiple slides at once.

In the nodes array above, we've made sure to space the slides out by doing some manual math with the SLIDE_WIDTH constant. In the next section we'll come up with an algorithm to automatically lay out the slides in a grid.

Laying out the nodes

We often get asked how to automatically lay out nodes in a flow, and we have some documentation on how to use common layouting libraries like dagre and d3-hierarchy in our layouting guide . Here you'll be writing your own super-simple layouting algorithm, which gets a bit nerdy, but stick with us!

For our presentation app we'll construct a simple grid layout by starting from 0,0 and updating the x or y coordinates any time we have a new slide to the left, right, up, or down.

First, we need to update our SlideData type to include optional ids for the slides to the left, right, up, and down of the current slide.

Storing this information on the node data directly gives us some useful benefits:

We can write fully declarative slides without worrying about the concept of nodes and edges

We can compute the layout of the presentation by visiting connecting slides

We can add navigation buttons to each slide to navigate between them automatically. We'll handle that in a later step.

The magic happens in a function we're going to define called slidesToElements . This function will take an object containing all our slides addressed by their id, and an id for the slide to start at. Then it will work through each connecting slide to build an array of nodes and edges that we can pass to the <ReactFlow /> component.

The algorithm will go something like this:

Push the initial slide's id and the position { x: 0, y: 0 } onto a stack.

While that stack is not empty...

Pop the current position and slide id off the stack.

Look up the slide data by id.

Push a new node onto the nodes array with the current id, position, and slide data.

Add the slide's id to a set of visited slides.

For every direction (left, right, up, down)...

Make sure the slide has not already been visited.

Take the current position and update the x or y coordinate by adding or subtracting SLIDE_WIDTH or SLIDE_HEIGHT depending on the direction.

Push the new position and the new slide's id onto a stack.

Push a new edge onto the edges array connecting the current slide to the new slide.

Repeat for the remaining directions...

If all goes to plan, we should be able to take a stack of slides shown below and turn them into a neatly laid out grid!

Let's see the code. In a file called slides.ts add the following:

We've left out the code for the right, up, and down directions for brevity, but the logic is the same for each direction. We've also included the same breakdown of the algorithm as comments, to help you navigate the code.

Below is a demo app of the layouting algorithm, you can edit the slides object to see how adding slides to different directions affects the layout. For example, try extending 4's data to include down: '5' and see how the layout updates.

If you spend a little time playing with this demo, you'll likely run across two limitations of this algorithm:

It is possible to construct a layout that overlaps two slides in the same position.

The algorithm will ignore nodes that cannot be reached from the initial slide.

Addressing these shortcomings is totally possible, but a bit beyond the scope of this tutorial. If you give a shot, be sure to share your solution with us on the discord server (opens in a new tab) !

With our layouting algorithm written, we can hop back to App.tsx and remove the hardcoded nodes array in favor of the new slidesToElements function.

The slides in our flow are static, so we can move the slidesToElements call outside the component to make sure we're not recalculating the layout if the component re-renders. Alternatively, you could use React's useMemo hook to define things inside the component but only calculate them once.

Because we have the idea of an "initial" slide now, we're also using the fitViewOptions to ensure the initial slide is the one that is focused when the canvas is first loaded.

Navigating between slides

So far we have our presentation laid out in a grid but we have to manually pan the canvas to see each slide, which isn't very practical for a presentation! We're going to add three different ways to navigate between slides:

Click-to-focus on nodes for jumping to different slides by clicking on them.

Navigation buttons on each slide for moving sequentially between slides in any valid direction.

Keyboard navigation using the arrow keys for moving around the presentation without using the mouse or interacting with a slide directly.

Focus on click

The <ReactFlow /> element can receive an onNodeClick callback that fires when any node is clicked. Along with the mouse event itself, we also receive a reference to the node that was clicked on, and we can use that to pan the canvas thanks to the fitView method.

fitView is a method on the React Flow instance, and we can get access to it by using the useReactFlow hook.

It's important to remember to include fitView as in the dependency array of our handleNodeClick callback. That's because the fitView function is replaced once React Flow has initialised the viewport. If you forget this step you'll likely find out that handleNodeClick does nothing at all (and yes, we also forget this ourselves sometimes too 🫠 ).

Calling fitView with no arguments would attempt to fit every node in the graph into view, but we only want to focus on the node that was clicked! The FitViewOptions object lets us provide an array of just the nodes we want to focus on: in this case, that's just the node that was clicked.

Slide controls

Clicking to focus a node is handy for zooming out to see the big picture before focusing back in on a specific slide, but it's not a very practical way for navigating around a prsentation. In this step we'll add some controls to each slide that allow us to move to a connected slide in any direction.

Let's add a <footer> to each slide that conditionally renders a button in any direction with a connected slide. We'll also preemptively create a moveToNextSlide callback that we'll use in a moment.

You can style the footer however you like, but it's important to add the "nopan" class to prevent prevent the canvas from panning as you interact with any of the buttons.

To implement moveToSlide we'll make use of fitView agan. Previously we had a reference to the actual node that was clicked on to pass to fitView , but this time we only have a node's id. You might be tempted to look up the target node by its id, but actually that's not necessary! If we look at the type of FitViewOptions we can see that the array of nodes we pass in only needs to have an id property:

Partial<Node> means that all of the fields of the Node object type get marked as optional, and then we intersect that with { id: Node['id'] } to ensure that the id field is always required. This means we can just pass in an object with an id property and nothing else, and fitView will know what to do with it!

Keyboard navigation

The final piece of the puzzle is to add keyboard navigation to our presentation. It's not very convenient to have to always click on a slide to move to the next one, so we'll add some keyboard shortcuts to make it easier. React Flow lets us listen to keyboard events on the <ReactFlow /> component through handlers like onKeyDown .

Up until now the slide currently focused is implied by the position of the canvas, but if we want to handle key presses on the entire canvas we need to explicitly track the current slide. We need to this because we need to know which slide to navigate to when an arrow key is pressed!

Here we've added a bit of state, currentSlide , to our flow component and we're making sure to update it whenever a node is clicked. Next, we'll write a callback to handle keyboard events on the canvas:

To save some typing we're extracting the direction from the key pressed - if the user pressed 'ArrowLeft' we'll get 'left' and so on. Then, if there is actually a slide connected in that direction we'll update the current slide and call fitView to navigate to it!

We're also preventing the default behaviour of the arrow keys to prevent the window from scrolling up and down. This is necessary for this tutorial because the canvas is only one part of the page, but for an app where the canvas is the entire viewport you might not need to do this.

And that's everything! To recap let's look at the final result and talk about what we've learned.

Final thoughts

Even if you're not planning on making the next Prezi (opens in a new tab) , we've still looked at a few useful features of React Flow in this tutorial:

The useReactFlow hook to access the fitView method.

The onNodeClick event handler to listen to clicks on every node in a flow.

The onKeyPress event handler to listen to keyboard events on the entire canvas.

We've also looked at how to implement a simple layouting algorithm ourselves. Layouting is a really common question we get asked about, but if your needs aren't that complex you can get quite far rolling your own solution!

If you're looking for ideas on how to extend this project, you could try addressing the issues we pointed out with the layouting algorithm, coming up with a more sophisticated Slide component with different layouts, or something else entirely.

You can use the completed source code (opens in a new tab) as a starting point, or you can just keep building on top of what we've made today. We'd love to see what you build so please share it with us over on our Discord server (opens in a new tab) or Twitter (opens in a new tab) .

Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro

DEV Community

Posted on Mar 24, 2020

Build a Slideshow Component with ReactJS

Hey there! In this tutorial we are going to build a simple but cool Slideshow component with ReactJS.

Basically, our Slideshow will be compost of three images. One image for the current slide, one for the previous and another for the next one. It'll also have controllers for advancing to the next or previous slide and it'll also be able to change the slide automatically every period of time.

You can find the result of the Slideshow component here .

If you're going to follow along with this post, you'll need to be familiarized with ReactJS and NodeJS .

Table of Contents

Basic component, adding style, functionality.

Alright, for this tutorial I'll use my Personal Website as the base project. Naturally, you can use any ReactJS project as the base of the project.

First, we'll set up a simple component inside the index.js file.

Now I'll import the Slideshow component into the web page and add it right below the bio.

It's time to make the HTML structure of the Slideshow component. So let's edit the index.js file.

Okay, we first have the section "slideshow" that hold the whole component. Inside this section we have two main elements, the div "slide-holder" (which will hold all the slides) and the div "slideshow-controller" (which will hold the buttons for going to the next or last slide).

Now, I'm going to add three sections inside the "slide-holder". Each section represents a slide: the last, current and next one.

It's time for add some styles for this component. So let's modify the styles.css file. Since CSS and UI is not the focus here, I'll not explain much about this part.

In short, all I've done is give all slides a purple background and made the current slide bigger. I'll also add some styles for the controllers as well.

Now that we have added styles to it, we can finally start to code the functionalities of the component. For that purpose, we'll need a set of props and a few states.

I'm going to use a array of images and a interval of time as props and since we're not using classes, we'll need to use React Hooks for controlling the states of the component. Which is why I'll import useState and useEffect methods from React.

With that in mind, let's modify our index.js file.

As you can see, I've also created a few states.

• thumbnails : It holds the images array.
• currentSlide : It holds the index of the current slide in the thumbnails array.
• currentSlideStyle : We'll use it for setting the backgroung-image of the "slide-thumbnail" div.

Note that I've also assigned currentSlideStyle to the style property of the div inside the "current-slide" .

Changing the background

Fine. Now we'll need to use the Effect Hook since we need to update the slides every time the component mounts or updates. So right below the state definitions we'll call our useEffect function passing our effect as a callback function.

This simply assigns the images array to the thumbnails state and also uses the currentSlide state (which holds the image index of the current slide) to set the currentSlideStyle state. Consequently, it sets the background-image of the "current slide" section.

Now I'll just pass a array of images and a interval to the Slideshow component in the page I want it to appear.

Making up the controllers

With that, we can now make the buttons start to working. For that, I'll just create two functions.

So the previous function gets the current slide index, finds out what is the previous one and assigns it to the currentSlide state. In case the current slide index is 0 (the first one) it will then use the last position of the array.

Now the next function works in a similar way, it will find out what is the next slide position and assign it to currentSlide state. But in case the current slide index is the last one it will use the first position of the array.

Every time the currentSlide states changes, the component will update and the useEffect function will run again. In other words, it will change the background of the current slide.

Note that I've also assigned the previous and next functions to the onClick event of each controller inside the "slide-controller" div.

Automatically Advancing Slides

How to make the Slideshow component changes its slides every period of time? We just need to use the setInterval method inside the useEffect .

I've made a constant and assinged it to the setInterval function, passing a callback function and a interval (which is a prop). The callback function is basically the copy of the next function and it just sets the currentSlide to the next position. With that, every period of time, the callback function will be executed and since it changes the currentSlide state, the component will updates and the useEffect will run again. Consequently, updating the background. Using the return of the useEffect , we then clear the constant of the interval function to prevent it to going crazy and causing a stack overflow.

If you run the component now, it will start to advance the slide every interval of time.

Next and Previous Slides

What about the other two "slides" sections we've got in the "slide-holder"? Very well, it's time for us to make them work as well.

With the same logic of the current slide, we'll need a state for holding the styles of the next and previous slides. We'll also need to update the useEffect function to make it updates the next and previous slides as well. As well, we can't forget to add each style state to the "slide-thumbnail" in its "slide" section.

Since the code for that follows the same principle of the next and previous functions, I don't see necessity of explaining it further.

If you've read until here, I'm really thankful for that. If you have any suggestions, corrections and even doubts about something related to the post, feel free to leave a comment or contact me.

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

ArrayQuery: ORM-like Querying for JavaScript Arrays

Cyprien Thao - Jul 17

Building Feedrika A News API Service: The Journey Continues

antoniodipinto - Jul 12

bootstrap or tailwind?🤔

Chisom Nwosu - Jul 25

Introduction to MEV on Starknet

LordGhostX - Jul 25

We're a place where coders share, stay up-to-date and grow their careers.

React Framework

Reveal.js can be added to a React project a few different ways.

• Install and setup reveal.js via npm
• Use third-party packages

Installing From npm

You can add and initialize reveal.js in a JavaScript/TypeScript source file like main.tsx or app.tsx .

You can do so globally i.e. outside of app/component functions or inside one of them. In the latter case, you have to be careful not to stack initializations. Only initialize a slide deck once. If you need to reconfigure, use the configure function or destroy the deck before initializing again.

To begin, install reveal using npm :

If you are using TypeScript, you need to install the types as well:

You will need the following imports:

Initialization

Finally, add the initialization code most suitable to your project's needs.

If you decide to intialize the slide deck inside an app or component function where slide deck containers are in the returned JSX, we recommended you use a useEffect hook to do so. This will ensure that initialization happens after the containers are first rendered.

It is also recommended to use refs to maintain a handle on the slide deck container div and the corresponding reveal instance. These refs can help make sure each slide deck is only initialized once.

Here's a full working example:

Note the use of deckDivRef in the Reveal constructor. This is important if you want to add multiple decks to the the same React app.

React Portals

If you only want to sprinkle a few components into specific slides, we recommend keeping the reveal.js DOM tree outside of React and using React Portals to place react component into specific sections.

Third Party Packages

The following third-party packages might prove useful for adding Reveal.js presentations to React projects or for adding React components/apps to Reveal.js presentations:

• revealjs-react - A React wrapper for the RevealJS Presentation Library.
• react-reveal-slides - A React component for creating Reveal.js presentations entirely in React.
• revealjs-react-boilerplate - A boilerplate for creating revealJS presentations using React.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

How-To Geek

What are presentational and container components in react.

Your changes have been saved

Email Is sent

Please verify your email address.

You’ve reached your account maximum for followed topics.

How to Build a Smart Home Without Spending Lots of Money

New outlook for windows is now ”generally available”, the clamshell laptop will never die, quick links, is there any state, looking at examples, characteristics of each type, advantages of separating presentational and container components.

React has a component-based architecture that encourages you to split your codebase into reusable units of functionality. Not all components are created equal though. Let's look at the differences between two common types, Presentational and Container (also known as "Stateful") components.

To begin with, it should be stressed that these terms don't refer to any specific React feature. They describe a style of writing React components which helps to maintain modularity and separate out concerns. The existence of the two component types arises from choices made in your codebase.

There's only one distinguishing factor: container components have state and presentational components do not. In practice, this means that a container component always makes a call to React's

method. A presentational component will never make use of state.

Here's a simple presentational component:

import React from "react";

class Presentational extends React.Component {

return <h1>{this.props.title}</h1>;

export default Presentational;

The component is extremely simple. It renders a single

tag which displays text passed into the component via its

prop. Let's now look at a stateful container component:

class Container extends React.Component {

constructor(props) {

super(props);

this.state = {

time: (new Date()).toString()

componentDidMount() {

setInterval(() => {

this.setState({time: (new Date()).toString()});

return <h1>{this.state.time}</h1>;

export default Container;

The container component's

method is almost identical to that in the presentational component. The difference is the container component sources its text from inside itself, instead of relying on an outside value passed in as a prop.

Each second, the container component calls

to update the

key in its state. This causes React to re-render the component and display the new time. Our container possesses its own state.

Several unique characteristics tend to arise within both presentational and container components. Looking at presentational components first, the bulk of their code is likely to exist within the

method. They'll contain very little logic as their behaviour is defined by the outside world.

Presentational components are blissfully unaware of where their data is coming from. They don't know when (or whether) it will change. Some examples may not even accept props. Here's a decorational element which simply renders a specific image file:

Container components are much the opposite of their presentational counterparts. You'll typically find most of your site's logic ends up within a container component. The

method may be comparatively short as you'll be spending many more lines fetching data from external sources, transforming it to suit your needs and then storing it into state.

A container component's

method could consist of a single line that renders a presentational component. You've now got strong separation of concerns, with both components having a distinct role that fully respects the other's. The container component sources the data; the presentational component puts it on the screen.

Here's how this looks in practice:

const View = ({title, body}) => (

<div>

<h1>{title}</h1>

<p>{body}</p>

</div>

class BlogPostComponent extends React.Component {

fetch("/blog-post.json")

.then(response => response.json());

.then(blog => this.setState({blog}));

title={this.state.blog.headline}

body={this.state.blog.content} />

is our container component. It loads a post over the network. The data then gets given to the

component for rendering.

doesn't care where it gets its data from - in the future, we could reuse it to display posts fetched from a third-party API such as Facebook or Twitter.

Container components are so called because they tend to encapsulate entire functional areas of your app. They make your project work and represent the app's backend systems.

In a real codebase,

would have even more responsibility. It would need to track whether the post has loaded and handle errors during the network fetch. Consequently, the

method may incorporate some basic logic to alter what gets displayed - either an error message, a progress bar or our presentational

component. Presentational components never have any greater responsibility than rendering a specific section of the UI into the DOM.

Using this pattern helps you to organise your codebase and prevents components from becoming too unwieldy. Although it's not a hard-and-fast rule, diligent separation of the two types improves maintainability as your project's component count grows.

Try to look for opportunities to refactor as a container component's

method grows. It's likely you could take much of its contents and split it into a new presentational component. This makes it easier to reuse the presentational code in the future. It ends up self-contained and capable of operating independently of any specific data source.

Stateful components are less likely to be reused. Non-trivial behaviours naturally accumulate within them, resulting in dependencies on the outside world. That's not to say they can't be reused though - a two-stage confirmation button will contain internal state (to determine whether to display "Reset User's Password" or "Are You Sure?") but will also be deployed throughout your codebase.

Perhaps more than anything, intentionally distinguishing between Presentional and Container components keeps you aware of where your application's state lies. Minimising the number of components with state contributes towards a maintainable codebase and helps to separate concerns.

If you can't decide whether a component should hold state, keep coding and refactor later - it's probably too early in your project's lifecycle to know where the complexity (and hence the state) will congregate.

• Programming

• Table of Contents
• Testimonials
• React from Zero Book
• 30 Days of React
• React Native Book
• Fullstack React Book
• Get The Book

Using Presentational and Container Components with Redux

In the last chapter, we added complexity to both the state as well as the view-layer of our application. To support threads in our app, we nested message objects inside of thread objects in our state tree. By using reducer composition, we were able to break up the management of our more complex state tree into smaller parts.

We added a new React component to support our threaded model, ThreadTabs , which lets the user switch between threads on the view. We also added some complexity to existing components.

At the moment, we have four React components in our app. Every React component interacts directly with the Redux store. App subscribes to the store and uses getState() to read the state and passes down this state as props to its children. Child components dispatch actions directly to the store.

In this chapter, we'll explore a new paradigm for organizing our React components. We can divide up our React components into two types: presentational components and container components . We'll see how doing so limits knowledge of our Redux store to container components and provides us with flexible and re-usable presentational components.

Presentational and container components

In React, a presentational component is a component that just renders HTML . The component's only function is presentational markup. In a Redux-powered app, a presentational component does not interact with the Redux store.

The presentational component accepts props from a container component . The container component specifies the data a presentational component should render. The container component also specifies behavior. If the presentational component has any interactivity — like a button — it calls a prop-function given to it by the container component. The container component is the one to dispatch an action to the Redux store:

Take a look at the ThreadTabs component:

class ThreadTabs extends React . Component { handleClick = ( id ) => { store . dispatch ( { type : 'OPEN_THREAD' , id : id , } ) ; } ; render ( ) { const tabs = this . props . tabs . map ( ( tab , index ) => ( < div key = { index } className = { tab . active ? 'active item' : 'item' } onClick = { ( ) => this . handleClick ( tab . id ) } > { tab . title } </ div > ) ) ; return ( < div className = ' ui top attached tabular menu ' > { tabs } </ div > ) ; } }

At the moment, this component both renders HTML (the text field input) and communicates with the store. It dispatches the OPEN_THREAD action whenever a tab is clicked.

But what if we wanted to have another set of tabs in our app? This other set of tabs would probably have to dispatch another type of action. So we'd have to write an entirely different component even though the HTML it renders would be the same.

What if we instead made a generic tabs component, say Tabs ? This presentational component would not specify what happens when the user clicks a tab. Instead, we could wrap it in a container component wherever we want this particular markup in our app. That container component could then specify what action to take by dispatching to the store.

We'll call our container component ThreadTabs . It will do all of the communicating with the store and let Tabs handle the markup. In the future, if we wanted to use tabs elsewhere — say, in a "contacts" view that has a tab for each group of contacts — we could re-use our presentational component:

Splitting up ThreadTabs

We'll split up ThreadTabs by first writing the presentational component Tabs . This component will only be concerned with rendering the HTML — the array of horizontal tabs. It will also expect a prop, onClick . The presentational component will allow its container component to specify whatever behavior it wants when a tab is clicked.

Let's add Tabs to App.js now. Write it above the current ThreadTab component. The JSX for the HTML markup is the same as before:

const Tabs = ( props ) => ( < div className = ' ui top attached tabular menu ' > { props . tabs . map ( ( tab , index ) => ( < div key = { index } className = { tab . active ? 'active item' : 'item' } onClick = { ( ) => props . onClick ( tab . id ) } > { tab . title } </ div > ) ) } </ div > ) ;

A unique aspect of our new presentational component is how it's declared. So far, we've been using ES6 classes like this:

React components declared in this manner are wrapped in React's component API. This declaration gives the component all of the React-specific features that we've been using, like lifecycle hooks and state management.

However, as we cover in the "Advanced Components" chapter, React also allows you to declare stateless functional components . Stateless functional components, like Tabs , are just JavaScript functions that return markup. They are not special React objects.

Because Tabs does not need any of React's component methods, it can be a stateless component.

In fact, all our presentational components can be stateless components. This reinforces their single responsibility of rendering markup. The syntax is terser. What's more, the React core team recommends using stateless components whenever possible. Because these components are not "dressed up" with any of the capabilities of React component objects, the React team anticipates there will be many performance advantages introduced for stateless components in the near future.

As we can see, the first argument passed in to a stateless component is props :

const Tabs = ( props ) => (

Because Tabs is not a React component object, it does not have the special property this.props . Instead, parents pass props to stateless components as an argument. So we'll access this component's props everywhere using props as opposed to this.props .

Our map call for Tabs is in-line, nested inside of the div tag in the function's return value. You could also put this logic above the function's return statement, like we had before in the render function of ThreadTabs . It's a matter of stylistic preference.

Our presentational component is ready. Let's see what the container component that uses it looks like. Modify the current ThreadTabs component:

class ThreadTabs extends React . Component { render ( ) { return ( < Tabs tabs = { this . props . tabs } onClick = { ( id ) => ( store . dispatch ( { type : 'OPEN_THREAD' , id : id , } ) ) } /> ) ; } }

Although we don't use any of React's component methods, we're still using an ES6 class component as opposed to declaring a stateless component. We'll see why in a moment.

Our container component specifies the props and behavior for our presentational component. We set the prop tabs to this.props.tabs , specified by App . Next, we set the prop onClick to a function that calls store.dispatch() . We expect Tabs to pass the id of the clicked tab to this function.

If we were to test the app out now, we'd be happy to note that our new container/presentational component combination is working.

However, there's one odd thing about ThreadTabs : It sends actions to the store directly with dispatch, yet at the moment it's reading from the store indirectly through props (through this.props.tabs ). App is the one reading from the store and this data trickles down to ThreadTabs . But if ThreadTabs is dispatching directly to the store, is this indirection for reading from the store necessary?

Instead, we can have all of our container components be responsible for both sending actions to the store and reading from it.

In order to achieve this with ThreadTabs , we can subscribe directly to the store in componentDidMount , the same way that App does:

class ThreadTabs extends React . Component { componentDidMount ( ) { store . subscribe ( ( ) => this . forceUpdate ( ) ) ; }

Then, inside of render , we can read state.threads directly from the store with getState() . We'll generate tabs here using the same logic that we used in App :

render ( ) { const state = store . getState ( ) ; const tabs = state . threads . map ( t => ( { title : t . title , active : t . id === state . activeThreadId , id : t . id , } ) ) ;

Now we don't need to read from this.props at all. We pass Tabs the tabs variable that we created:

return ( < Tabs tabs = { tabs } onClick = { ( id ) => ( store . dispatch ( { type : 'OPEN_THREAD' , id : id , } ) ) } /> ) ;

Our Tabs component is purely presentational. It specifies no behavior of its own and could be dropped-in anywhere in the app.

The ThreadTabs component is a container component. It renders no markup. Instead, it interfaces with the store and specifies which presentational component to render. The container component is the connector of the store to the presentational component.

Our presentational and container component combination, in full:

const Tabs = ( props ) => ( < div className = ' ui top attached tabular menu ' > { props . tabs . map ( ( tab , index ) => ( < div key = { index } className = { tab . active ? 'active item' : 'item' } onClick = { ( ) => props . onClick ( tab . id ) } > { tab . title } </ div > ) ) } </ div > ) ; class ThreadTabs extends React . Component { componentDidMount ( ) { store . subscribe ( ( ) => this . forceUpdate ( ) ) ; } render ( ) { const state = store . getState ( ) ; const tabs = state . threads . map ( t => ( { title : t . title , active : t . id === state . activeThreadId , id : t . id , } ) ) ; return ( < Tabs tabs = { tabs } onClick = { ( id ) => ( store . dispatch ( { type : 'OPEN_THREAD' , id : id , } ) ) } /> ) ; } }

In addition to the ability to re-use our presentational component elsewhere in the app, this paradigm gives us another significant benefit: We've de-coupled our presentational view code entirely from our state and its actions. As we'll see, this approach isolates all knowledge of Redux and our store to our app's container components. This minimizes the switching costs in the future. If we wanted to move our app to another state management paradigm, we wouldn't need to touch any of our app's presentational components.

Splitting up Thread

Let's continue refactoring with our new design pattern.

Thread receives the thread as a prop and contains all the markup for rendering the messages inside of that thread as well as MessageInput . The component will dispatch to the store a DELETE_MESSAGE action if a message is clicked.

Part of rendering the view for a thread involves rendering the view for its messages. We could have separate container and presentational components for threads and messages. In this setup, the presentational component for a thread would render the container component for a message.

But because we don't anticipate ever rendering a list of messages outside of a thread, it's reasonable to just have the container component for the thread also manage the presentational component for a message.

We can have one container component, ThreadDisplay . This container component will render the presentational component Thread :

For the list of messages, we can have Thread render another presentational component, MessageList .

But what about the component MessageInput ? Like our previous version of ThreadTabs , the component contains two responsibilities. The component renders markup, a single text field with a submit button. In addition, it specifies the behavior for what should happen when the form is submitted.

We could, instead, just have a generic presentational component. TextFieldSubmit only renders markup and allows its parent to specify what happens when the text field is submitted. ThreadDisplay , through Thread , could control the behavior of this text field.

With this design, we'd have one container component for a thread up top. The presentational component Thread would be a composite of two child presentational components, MessageList and TextFieldSubmit :

Let's first rename our current Thread component to ThreadDisplay to avoid confusion:

We'll begin at the bottom, writing the presentational components TextFieldSubmit and MessageList . We'll work our way up to Thread and then ThreadDisplay .

TextFieldSubmit

Like with ThreadTabs , MessageInput has two distinct roles: the component both renders the HTML for an input field but also specifies what the behavior around submitting that input field should be (dispatching ADD_MESSAGE ).

If we remove the dispatch call from MessageInput , we'd be left with a generic component that just rendered markup: a text field with an adjacent submit button. The presentational component will allow its container component to specify whatever behavior it wants when the input field is submitted.

Let's rename MessageInput to TextFieldSubmit to make it more generic. The only additional change we need to make is in handleSubmit() . We'll have TextFieldSubmit expect a single prop, onSubmit . Instead of dispatching to the store directly, it will invoke this prop-function:

class TextFieldSubmit extends React . Component { state = { value : '' , } ; onChange = ( e ) => { this . setState ( { value : e . target . value , } ) } ; handleSubmit = ( ) => { this . props . onSubmit ( this . state . value ) ; this . setState ( { value : '' , } ) ; } ;

MessageList

The MessageList component will accept two props: messages and onClick . As before, this presentational component will not specify any behavior. As a stateless component, it will only render HTML.

Write it below TextFieldSubmit and above the ThreadDisplay component in App.js :

const MessageList = ( props ) => ( < div className = ' ui comments ' > { props . messages . map ( ( m , index ) => ( < div className = ' comment ' key = { index } onClick = { ( ) => props . onClick ( m . id ) } > < div className = ' text ' > { m . text } < span className = ' metadata ' > @ { m . timestamp } </ span > </ div > </ div > ) ) } </ div > ) ;

The map that we perform over props.messages is the same logic we had previously in Thread . We perform it in-line, nested inside of the div tag which is responsible for styling. The three changes:

• We perform the map over props.messages as opposed to this.props.threads
• The onClick attribute is now set to props.onClick
• For brevity, we're using the variable m in place of message

You could optionally break this presentational component down further by adding another component, Message . The markup for each message is still simple enough that we opted not to do this just yet here.

We have two presentational components related to displaying a thread. One is MessageList , which renders all of the messages in that thread. The other is TextFieldSubmit , a generic text field entry that we're going to have submit new messages to the thread.

We're collecting these two presentational components under Thread , another presentational component. The container component ThreadDisplay will render Thread which in turn will render MessageList and TextFieldSubmit .

We anticipate that ThreadDisplay will pass Thread three props:

• thread : The thread itself
• onMessageClick : The message click handler
• onMessageSubmit : The text field submit handler

We'll have Thread pass along the appropriate props to each of its child presentational components:

const Thread = ( props ) => ( < div className = ' ui center aligned basic segment ' > < MessageList messages = { props . thread . messages } onClick = { props . onMessageClick } /> < TextFieldSubmit onSubmit = { props . onMessageSubmit } /> </ div > ) ;

This page is a preview of Fullstack React: The Complete Book on ReactJS and Friends.

Get the rest of this chapter plus hundreds of pages of React instruction, 5 sample projects , a screencast, and more.

Get A Full Sample Chapter PDF

Want to build your first React app? Put in your email below and we'll email you a PDF that walks you through building an app in React - step-by-step, from empty folder to a working app.

Find React Pptx Examples and Templates

Use this online react-pptx playground to view and fork react-pptx example apps and templates on codesandbox. click any example below to run it instantly or find templates that can be used as a pre-built solution.

How to add a PowerPoint viewer into a React component?

• Post author By John Au-Yeung
• Post date November 6, 2021
• No Comments on How to add a PowerPoint viewer into a React component?

Sometimes, we want to add a PowerPoint viewer into a React component.

In this article, we’ll look at how to add a PowerPoint viewer into a React component.

To add a PowerPoint viewer into a React component, we can add a iframe that shows the PowerPoint slide’s with Microsoft’s online PowerPoint viewer.

For instance, we write:

We want to show the PowerPoint presentation that’s located in the URL assigned to linkToPPTFile .

To show the slides, we add an iframe with src set to https://view.officeapps.live.com/op/embed.aspx?src=${linkToPPTFile} .

We also set the width and height to set the dimensions.

And we set the frameBorder to 0 to remove the iframe border.

Related Posts

Sometimes, we want to add a background image in React component. In this article, we'll…

Sometimes, we want to add multiple classes to a React component. In this article, we'll…

Sometimes, we want to add a <br> tag between 2 strings i a React component.…

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

React for Beginners – A React.js Handbook for Front End Developers

React is one of the most popular JavaScript frameworks ever created, and I believe that it's one of the best tools out there.

The goal of this handbook is to provide a starter guide to learning React.

At the end of the book, you'll have a basic understanding of:

• What React is and why it's so popular

How to install React

React components.

• React State
• React Props

Handling user events in React

Lifecycle events in a react component.

These topics will be the base upon which you will build in other more advanced React tutorials.

This book is especially written for JavaScript programmers who are new to React. So let's get started.

What is React?

React is a JavaScript library that aims to simplify the development of visual interfaces.

Developed at Facebook and released to the world in 2013, it drives some of the most widely used apps, powering Facebook and Instagram among countless other applications.

Its primary goal is to make it easy to reason about an interface and its state at any point in time. It does this by dividing the UI into a collection of components.

You might experience some initial difficulties when learning React. But once it "clicks", I guarantee it's going to be one of the best experiences you ever have. React makes many things easier, and its ecosystem is filled with great libraries and tools.

React in itself has a very small API, and you basically need to understand 4 concepts to get started:

We'll explore all of these in this book, and we'll leave the more advanced concepts to other tutorials. I will give you some pointers in the last section about how to move forward.

And you can download this handbook in PDF / ePub / Mobi format for free .

Summary of the handbook

How much javascript you need to know to use react, why should you learn react, introduction to jsx, using jsx to compose a ui, the difference between jsx and html, embedding javascript in jsx, managing state in react, component props in react, data flow in a react application, where to go from here.

Before jumping straight into React, you should have a good understanding of some core JavaScript concepts.

You don't have to be a JavaScript expert, but I think you need a good overview of:

• Arrow functions
• Work with objects and arrays using Rest and Spread
• Object and array destructuring
• Template literals

If those concepts sound unfamiliar, I've provided you with some links to find out more about those subjects.

I highly recommend that any Web developer has at least a basic understanding of React.

That's because of a few reasons.

• React is very popular. As a developer, it's quite likely that you're going to work on a React project in the future. Perhaps an existing project, or maybe your team will want you to work on a brand new app based on React.
• A lot of tooling today is built using React at the core. Popular frameworks and tools like Next.js, Gatsby, and many others use React under the hood.
• As a frontend engineer, React is probably going to come up in a job interview.

Those are all good reasons, but one of the main reasons I want you to learn React is that it's great.

It promotes several good development practices, including code reusability and component-driven development. It is fast, it is lightweight, and the way it makes you think about the data flow in your application perfectly suits a lot of common scenarios.

There are a few different ways to install React.

To start with, I highly recommend one approach, and that's using the officially recommended tool called create-react-app .

create-react-app is a command line application, aimed at getting you up to speed with React in no time.

You start by using npx , which is an easy way to download and execute Node.js commands without installing them.

See my npx guide here: https://flaviocopes.com/npx/

npx comes with npm (since version 5.2). If you don't have npm installed already, do it now from https://nodejs.org (npm is installed with Node).

If you are unsure which version of npm you have, run npm -v to check if you need to update.

Tip: check out my OSX terminal tutorial at https://flaviocopes.com/macos-terminal/ if you're unfamiliar with using the terminal. It applies to Mac and Linux.

When you run npx create-react-app <app-name> , npx is going to download the most recent create-react-app release, run it, and then remove it from your system.

This is great because you will never have an outdated version on your system, and every time you run it, you're getting the latest and greatest code available.

Let's start then:

This is when it finished running:

create-react-app created a file structure in the folder you told it to ( todolist in this case), and initialized a Git repository.

It also added a few commands in the package.json file:

So you can immediately start the app by going into the newly created application folder and running npm start .

By default this command launches the app on your local port 3000, and it opens your browser showing you the welcome screen:

Now you're ready to work on this application!

In the last section you saw how to create your first React application.

This application comes with a series of files that do various things, mostly related to configuration, but there's one file that stands out: App.js .

App.js is the first React Component you meet.

Its code is this:

An application built using React, or one of the other popular frontend frameworks like Vue and Svelte for example, is built using dozens of components.

But let's start by analyzing this first component. I'm going to simplify this component code like this:

You can see a few things here. We import some things, and we export a function called App .

The things we import in this case are a JavaScript library (the react npm package), an SVG image, and a CSS file.

create-react-app is set up in a way that allows us to import images and CSS to use in our JavaScript, but this is not something you need to care about now. What you need to care about is the concept of a component

App is a function that, in the original example, returns something that at first sight looks quite strange.

It looks like HTML but it has some JavaScript embedded into it.

That is JSX , a special language we use to build a component's output. We'll talk more about JSX in the next section.

In addition to defining some JSX to return, a component has several other characteristics.

A component can have its own state , which means it encapsulates some variables that other components can't access unless this component exposes this state to the rest of the application.

A component can also receive data from other components. In this case we're talking about props .

Don't worry, we're going to look in detail at all those terms (JSX, State and Props) soon.

We can't talk about React without first explaining JSX.

In the last section you met your first React component, the App component defined in the default application built by create-react-app .

Its code was this:

We previously ignored everything that was inside the return statement, but in this section we're going to talk about it.

We call JSX everything wrapped inside the parentheses returned by the component:

This looks like HTML, but it's not really HTML. It's a little different.

And it's a bit strange to have this code inside a JavaScript file. This does not look like JavaScript at all!

Under the hood, React will process the JSX and it will transform it into JavaScript that the browser will be able to interpret.

So we're writing JSX, but in the end there's a translation step that makes it digestible to a JavaScript interpreter.

React gives us this interface for one reason: it's easier to build UI interfaces using JSX .

Once you get more familiar with it, of course.

In the next section we'll talk about how JSX lets you easily compose a UI, then we'll look at the differences with "normal HTML" that you need to know.

As introduced in the last section, one of the main benefits of JSX is that it makes it very easy to build a UI.

In particular, in a React component you can import other React components, and you can embed them and display them.

A React component is usually created in its own file, because that's how we can easily reuse it (by importing it) in other components.

But a React component can also be created in the same file of another component, if you plan to only use it in that component. There's no "rule" here, you can do what feels best to you.

I generally use separate files when the number of lines in a file grows too much.

To keep things simple let's create a component in the same App.js file.

We're going to create a WelcomeMessage component:

See? It's a simple function that returns a line of JSX that represents a p HTML element.

We're going to add it to the App.js file.

Now inside the App component JSX we can add <WelcomeMessage /> to show this component in the user interface:

And here's the result. Can you see the "Welcome!" message in the screen?

We say that WelcomeMessage is a child component of App, and App is its parent componnet.

We're adding the <WelcomeMessage /> component as if it was part of the HTML language.

That's the beauty of React components and JSX: we can compose an application interface and use it like we're writing HTML.

With some differences, as we'll see in the next section.

JSX kind of looks like HTML, but it's not.

In this section I want to introduce you to some of the most important things you need to keep in mind when using JSX.

One of the differences might be quite obvious if you looked at the App component JSX: there's a strange attribute called className .

In HTML we use the class attribute. It's probably the most widely used attribute, for various reasons. One of those reasons is CSS. The class attribute allows us to style HTML elements easily, and CSS frameworks like Tailwind put this attribute to the center of the CSS user interface design process.

But there's a problem. We are writing this UI code in a JavaScript file, and class in the JavaScript programming language is a reserved word. This means we can't use this reserved word as we want. It serves a specific purpose (defining JavaScript classes) and the React creators had to choose a different name for it.

That's how we ended up with className instead of class .

You need to remember this especially when you're copy/pasting some existing HTML.

React will try its best to make sure things don't break, but it will raise a lot of warnings in the Developer Tools:

This is not the only HTML feature that suffers from this problem, but it's the most common one.

Another big difference between JSX and HTML is that HTML is very relaxed , we can say. Even if you have an error in the syntax, or you close the wrong tag, or you have a mismatch, the browser will try its best to interpret the HTML without breaking.

It's one of the core features of the Web. It is very forgiving.

JSX is not forgiving. If you forget to close a tag, you will have a clear error message:

React usually gives very good and informative error messages that point you in the right direction to fix the problem.

Another big difference between JSX and HTML is that in JSX we can embed JavaScript.

Let's talk about this in the next section.

One of the best features of React is that we can easily embed JavaScript into JSX.

Other frontend frameworks, for example Angular and Vue, have their own specific ways to print JavaScript values in the template, or perform things like loops.

React doesn't add new things. Instead, it lets us use JavaScript in the JSX, by using curly brackets.

The first example of this that I will show you comes directly from the App component we've studied so far.

We import the logo SVG file using

and then in the JSX we assign this SVG file to the src attribute of an img tag:

Let's do another example. Suppose the App component has a variable called message :

We can print this value in the JSX by adding {message} anywhere in the JSX.

Inside the curly brackets { } we can add any JavaScript statement, but just one statement for every curly bracket block.

And the statement must return something.

For example this is a common statement you will find in JSX. We have a ternary operator where we define a condition ( message === 'Hello!' ), and we print one value if the condition is true, or another value (the content of message in this case) if the condition is false:

Every React component can have its own state .

What do we mean by state ? The state is the set of data that is managed by the component .

Think about a form, for example. Each individual input element of the form is responsible for managing its state: what is written inside it.

A button is responsible for knowing if it's being clicked, or not. If it's on focus.

A link is responsible for knowing if the mouse is hovering over it.

In React, or in any other components-based framework/library, all our applications are based on and make heavy use of components' state.

We manage state using the useState utility provided by React. It's technically a hook (you don't need to know the details of hooks right now, but that's what it is).

You import useState from React in this way:

Calling useState() , you will get back a new state variable, and a function that we can call to alter its value.

useState() accepts the initial value of the state item and returns an array containing the state variable, and the function you call to alter the state.

This is important. We can't just alter the value of a state variable directly. We must call its modifier function. Otherwise the React component will not update its UI to reflect the changes of the data.

Calling the modifier is the way we can tell React that the component state has changed.

The syntax is a bit weird, right? Since useState() returns an array we use array destructuring to access each individual item, like this: const [count, setCount] = useState(0)

Here's a practical example:

You can add as many useState() calls as you want, to create as many state variables as you want:

We call props the initial values passed to a component.

We previously created a WelcomeMessage component

and we used it like this:

This component does not have any initial value. It does not have props.

Props can be passed as attributes to the component in the JSX:

and inside the component we receive the props as arguments:

It's common to use object destructuring to get the props by name:

Now that we have the prop, we can use it inside the component. For example we can print its value in the JSX:

Curly brackets here have various meanings. In the case of the function argument, curly brackets are used as part of the object destructuring syntax.

Then we use them to define the function code block, and finally in the JSX to print the JavaScript value.

Passing props to components is a great way to pass values around in your application.

A component either holds data (has state) or receives data through its props.

We can also send functions as props, so a child component can call a function in the parent component.

A special prop is called children . That contains the value of anything that is passed between the opening and closing tags of the component, for example:

In this case, inside WelcomeMessage we could access the value Here is some message by using the children prop:

In a React application, data typically flows from a parent component to a child component, using props as we saw in the previous section:

If you pass a function to the child component, you can however change the state of the parent component from a child component:

Inside the Counter component we can now grab the setCount prop and call it to update the count state in the parent component, when something happens:

You need to know that there are more advanced ways to manage data, which include the Context API and libraries like Redux. But those introduce more complexity, and 90% of the times using those 2 ways I just explained are the perfect solution.

React provides an easy way to manage events fired from DOM events like clicks, form events, and more.

Let's talk about click events, which are pretty simple to digest.

You can use the onClick attribute on any JSX element:

When the element is clicked, the function passed to the onClick attribute is fired.

You can define this function outside of the JSX:

When the click event is fired on the button, React calls the event handler function.

React supports a vast amount of types of events, like onKeyUp , onFocus , onChange , onMouseDown , onSubmit and many more.

So far we've seen how to manage state with the useState hook.

There's another hook I want to introduce in this book: useEffect .

The useEffect hook allows components to have access to the lifecycle events of a component.

When you call the hook, you pass it a function. The function will be run by React when the component is first rendered, and on every subsequent re-render/update.

React first updates the DOM, then calls any function passed to useEffect() .

All without blocking the UI rendering, even on blocking code.

Here is an example:

Since the useEffect() function is run on every subsequent re-render/update of the component, we can tell React to skip it, for performance purposes. We do this by adding a second parameter which is an array that contains a list of state variables to watch for.

React will only re-run the side effect if one of the items in this array changes.

Similarly, you can tell React to only execute the side effect once (at mount time), by passing an empty array:

You migth find yourself using this option a lot.

useEffect() is great for adding logs, accessing 3rd party APIs, and much more.

Mastering the topics explained in this article is a great step towards your goal of learning React.

I want to give you some pointers now, because it's easy to get lost in the sea of tutorials and courses about React.

What should you learn next?

Learn more theory about the Virtual DOM , writing declarative code , unidirectional data flow , immutability , composition .

Start building some simple React applications. For example build a simple counter or a interact with a public API .

Learn how to perform conditional rendering , how to perform loops in JSX , how to use the React Developer Tools .

Learn how to apply CSS in a React application, with plain CSS or Styled Components .

Learn how to manage state using the Context API , useContext and Redux .

Learn how to interact with forms .

Learn how to use React Router .

Learn how to test React applications .

Learn an application framework built on top of React, like Gatsby or Next.js .

Most of all, make sure you practice by building sample applications to apply everything you've learned.

Thanks a lot for reading this handbook.

I hope it will inspire you to learn more about React and everything you can do with it!

Remember that you can download this handbook in PDF / ePub / Mobi format for free if you want.

I publish programming tutorials every day on my website flaviocopes.com if you want to check out more great content like this.

You can reach me on Twitter @flaviocopes .

Read more posts .

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

• React Native
• CSS Frameworks
• JS Frameworks
• Web Development
• Explore GfG Premium
• React Tutorial
• React Introduction
• React Environment Setup

React Fundamentals

• ReactJS Babel Introduction
• ReactJS Virtual DOM
• React JS ReactDOM
• React Lists
• React Forms
• ReactJS Keys
• ReactJS Refs
• ReactJS Rendering Elements
• React Conditional Rendering
• React Components
• Code Splitting in React
• ReactJS | Components - Set 2
• ReactJS Pure Components
• ReactJS Functional Components
• React Lifecycle
• Differences between Functional Components and Class Components

ReactJS Container and Presentational Pattern in Components

React props & states.

• ReactJS Methods as Props
• ReactJS PropTypes
• ReactJS Props - Set 1
• ReactJS Props - Set 2
• ReactJS Unidirectional Data Flow
• ReactJS State
• ReactJS State vs Props
• Implementing State in React Components
• React Hooks
• React useState Hook
• ReactJS useEffect Hook
• Context in React
• React Router
• React JS Types of Routers
• ReactJS Fragments
• Create ToDo App using ReactJS
• Create a Quiz App using ReactJS
• Create a Coin Flipping App using ReactJS
• How to create a Color-Box App using ReactJS?
• Dice Rolling App using ReactJS
• Guess the number with React

React Connection & Deployment

• How to Deploy Your React Websites on GitHub?
• How to Deploy React project on Firebase?
• How to deploy React app to Heroku?
• How to deploy React app to Surge ?
• How to deploy simple frontend server-less (static) React applications on Netlify

React Exercises

• React Exercises, Practice Questions and Solutions

React Questions

• How to connect Django with Reactjs ?
• 7 React Best Practices Every Web Developer Should Follow
• 8 Ways to Style React Components
• How to add Stateful component without constructor class in React?
• How to display a PDF as an image in React app using URL?
• React JS Toast Notification
• What is the use of data-reactid attribute in HTML ?
• How to zoom-in and zoom-out image using ReactJS?
• How to avoid binding by using arrow functions in callbacks in ReactJS?
• How to bind 'this' keyword to resolve classical error message 'state of undefined' in React?
• How to get the height and width of an Image using ReactJS?
• How to handle multiple input field in react form with a single function?
• How to handle states of mutable data types?
• How to change state continuously after a certain amount of time in React?
• How to change the state of react component on click?

In this article we will categorise the react components in two types depending on the pattern in which they are written in application and will learn briefly about these two categories. We will also discuss about alternatives to this pattern.

Presentational and Container Components

The type of components is decided by components pattern. If the component decides how the data will be presented on the screen it is called as presentational component . If the component focuses on what data is to be shown to the user then it is called as container component

We will discuss individually about these components in this article.

Presentational components:

• Mainly concerned with how things look.
• Have no major dependencies on the rest of the app.
• No connection with the specification of the data that is outside the component.
• Mainly receives data and callbacks exclusively via props.
• May contain both presentational and container components inside it considering the fact that it contains DOM markup and styles of their own.

Example: For example, the below code denotes a presentational component, and it gets its data from the props and just focuses on showing an element. 

Container components:

• Mainly concerned with how things work.
• May contain both presentational and container components but does not have DOM and markup of their own.
• Provide the data and behavior to presentational or other container components.
• Call flux actions and provides these as callbacks to the presentational component.

Benefits of Container/Presentational Pattern

• Creates pure functions
• Separates render and fetching logic
• Makes the components more reusable
• Testing the components is easier

Disadvantages of Container/Presentational Pattern

• It’s alternatives perform better
• Usage is decreased as we no longer need class components to create states.

Alternative to Presentational/Container Pattern

This pattern based approach can be easily replaced with using hooks in React. Instead, of creating different components based on the pattern we can create a single component which uses hooks to implement different functionality. Since the introduction of hooks in React the use of this pattern is reduced but it is still used in some cases as performing tests is easier in this pattern approach.

Please Login to comment...

Similar reads.

• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Powerpoint viewer for react?

I searched a lot for this but couldn't find any package or a guide on how to view a ".ppt" file on a webpage using react.js.

I'm allowing the user to upload a ".ppt" file, and I want him to be able to view that "Powerpoint" file in a web page, is that even possible?

I tried the following but it didn't work ...

Any help will be appreciated.

• presentation
• contentpresenter

6 Answers 6

I also had this similar issue. The problem is with this part src=[${linkToPPTFile}] of your iframe src. Remove the box brackets. It should just be:

I've been searching for an answer for this for a while and stumbled upon a solution that I think might work for your case too. I used the react-doc-viewer library that enables you to display multiple file types like ppt, word, excel and many more. You can install it with npm, further instructions on this link https://www.npmjs.com/package/react-doc-viewer and simply create a custom viewer component that you can reuse for your files.

It appears that particular Microsoft embed link no longer works. One way to make it happen is to store the PowerPoint file in a public folder online and create an embed code in PowerPoint for the Web ( https://www.office.com/launch/powerpoint ). The embed code should include an <iframe/> tag.

There's more information about the process here: https://support.office.com/en-us/article/Embed-a-presentation-in-a-web-page-or-blog-19668A1D-2299-4AF3-91E1-AE57AF723A60

• Just re-read the question. I will look to see if it's possible for a user-uploaded file. –  Ed Lucas Commented Feb 9, 2020 at 19:54

If you have backend, it is built with node.js and you will have full control over production server (i.e. able to install software there), you can try to covert to png using ppt-png package. Under the hood it uses libreoffice for ppt-pdf conversion and then imagemagick for pdf-png conversion and this is the best approach to task.

• I think this could be the only way to go about it, and I do have control over the backend, however, it is built with PHP :(. I'll try to figure out how to do it server-side and send back the PNGs to the frontend. –  Ruby Commented Feb 13, 2020 at 18:34
• @Ruby combining these two libraries might do the trick: office-converter , pdf-to-image . They use the same principle and require to install libreoffice, imagick and ghostscript –  Gennady Dogaev Commented Feb 13, 2020 at 18:59

There's some similar information here .

From what I read it seems like you could either convert the powerpoints to flash and display those, or potentially use some sort of tool like slideshare or a google slides extension.

Hope this helps!

• 1 Unfortunately, these options won't work for my case. Thanks for the effort thought :) –  Ruby Commented Feb 7, 2020 at 15:33

The only possible user-uploaded PPT solution I could find involves uploading a copy of the file to One Drive, using Microsoft's API: https://learn.microsoft.com/en-us/onedrive/developer/rest-api/concepts/upload?view=odsp-graph-online

You could then create a "sharing link" using the API. The URL to the shared file is returned in the API response ( https://1drv.ms/.. .) and anyone using the link can access the document to view it online. See: https://learn.microsoft.com/en-us/onedrive/developer/rest-api/api/driveitem_createlink?view=odsp-graph-online

• That won't work for me, I need a way to display the ppt file directly (coming as a link from an API response) or somehow convert that file to an array of images to display it as a slider. –  Ruby Commented Feb 9, 2020 at 20:37
• It looks as though it's possible to create an "embed" version of the link using "createLink" once your copy the file to One Drive via the API. –  Ed Lucas Commented Feb 9, 2020 at 20:55
• Yes maybe but that would require repurchasing a space on OneDrive and that would lead to another level of complications. –  Ruby Commented Feb 9, 2020 at 21:02
• If you would prefer to convert PPTX files to images, there seems to be a slew of options on github ( github.com/search?q=ppt+to+image ) and some commercial APIs ( developers.zamzar.com ). –  Ed Lucas Commented Feb 9, 2020 at 21:05
• Do you have a code example on converting PPT files to images? –  Ruby Commented Feb 12, 2020 at 7:13

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged reactjs powerpoint presentation contentpresenter or ask your own question .

• Featured on Meta
• Announcing a change to the data-dump process
• We've made changes to our Terms of Service & Privacy Policy - July 2024

Hot Network Questions

• Wife missing in Italy
• Unreal present conditionals and could be real assumptions
• In what way are sublime objects, objects?
• How can DC charge a capacitor?
• Do strawberry seeds have different DNA within the same fruit?
• What is the difference of "limiting reactant" and "limiting reagent"?
• Are there any signs that the laptop fan is broken during use?
• Simpson's paradox in Freedman, Pisani and Purves book
• Widow of a Cohen allowed to eat truma?
• What kind of navy could island nations with populations in the few 100k range build to fight each other in a 1890s-1920s naval technology?
• What is/was float option n? Unknown float option `n'
• How is the name "Took" pronounced?
• Formal way to state that a condition is true for a certain number of elements of a set.
• How do I know when I have sufficiently mastered a right hand speed drill for accordion?
• Are there non-religious variants of moral realism that defend the existence of objectively evil thoughts, intentions, and desires?
• Foundations and contradictions of Scholze's work: the category of presentable infinity categories contains itself
• How to Respond to Directive: "Move Our Entire Website to a CMS Service"
• Can I replace this resistor (in USB adapter that plugs to mains) with this other resistor?
• Does spring stop applying force as soon as we cut it?
• ESTA renewal advice
• Stanley's review of Macdonald's book (Symmetric functions and Hall polynomials)
• In an expanding universe could black hole pairs keep orbiting each other forever?
• What game features a battle against a giant gold/bronze man?
• Condition on the data of table

• 4 Dependencies
• 65 Dependents
• 51 Versions

Create JavaScript PowerPoint Presentations

• Table of Contents

Introduction

Works everywhere, full featured, simple and powerful, export your way, html to powerpoint, additional builds, angular/react, es6, typescript, script/web browser, library api, html-to-powerpoint feature, library ports, issues / suggestions, contributors.

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

• Every modern desktop and mobile browser is supported
• Integrates with Node, Angular, React, and Electron
• Compatible with PowerPoint, Keynote, and more
• All major object types are available (charts, shapes, tables, etc.)
• Master Slides for academic/corporate branding
• SVG images, animated gifs, YouTube videos, RTL text, and Asian fonts
• The absolute easiest PowerPoint library to use
• Learn as you code will full typescript definitions included
• Tons of demo code comes included (over 75 slides of features)
• Exports files direct to client browsers with proper MIME-type
• Other export formats available: base64, blob, stream, etc.
• Presentation compression options and more
• Includes powerful HTML-to-PowerPoint feature to transform HTML tables into presentations with a single line of code

Visit the demos page to create a simple presentation to see how easy it is to use pptxgenjs, or check out the complete demo which showcases every available feature.

• PptxGenJS Demos

Installation

PptxGenJS NPM Home

jsDelivr Home

Bundle: Modern Browsers and IE11

Min files: Modern Browsers

GitHub Latest Release

Bundle: Modern Browsers

• Use the bundle for IE11 support
• CommonJS: dist/pptxgen.cjs.js
• ES Module: dist/pptxgen.es.js

Documentation

Quick start guide.

PptxGenJS PowerPoint presentations are created via JavaScript by following 4 basic steps:

That's really all there is to it!

Full documentation and code examples are available

• Creating a Presentation
• Presentation Options
• Adding a Slide
• Slide Options
• Saving a Presentation
• Master Slides
• Adding Charts
• Adding Images
• Adding Media
• Adding Shapes
• Adding Tables
• Adding Text
• Speaker Notes
• Using Scheme Colors
• Integration with Other Libraries

Easily convert HTML tables to PowerPoint presentations in a single call.

Learn more:

• HTML-to-PowerPoint Docs/Demo

React: react-pptx - thanks to Joonas !

Please file issues or suggestions on the issues page on github , or even better, submit a pull request . Feedback is always welcome!

When reporting issues, please include a code snippet or a link demonstrating the problem. Here is a small jsFiddle that is already configured and uses the latest PptxGenJS code.

Sometimes implementing a new library can be a difficult task and the slightest mistake will keep something from working. We've all been there!

If you are having issues getting a presentation to generate, check out the code in the demos directory. There are demos for both client browsers, node and react that contain working examples of every available library feature.

• Use a pre-configured jsFiddle to test with: PptxGenJS Fiddle
• View questions tagged PptxGenJS on StackOverflow . If you can't find your question, ask it yourself - be sure to tag it PptxGenJS .

Thank you to everyone for the issues, contributions and suggestions! ❤️

Special Thanks:

• Dzmitry Dulko - Getting the project published on NPM
• Michal Kacerovský - New Master Slide Layouts and Chart expertise
• Connor Bowman - Adding Placeholders
• Reima Frgos - Multiple chart and general functionality patches
• Matt King - Chart expertise
• Mike Wilcox - Chart expertise
• Joonas - React port

PowerPoint shape definitions and some XML code via Officegen Project

If you find this library useful, please consider sponsoring us through a donation

Copyright © 2015-present Brent Ely

• html-to-powerpoint
• javascript-create-powerpoint
• javascript-create-pptx
• javascript-generate-pptx
• javascript-powerpoint
• javascript-powerpoint-charts
• javascript-pptx
• js-create-powerpoint
• js-create-pptx
• js-generate-powerpoint
• js-powerpoint
• js-powerpoint-library
• js-powerpoint-pptx
• react-powerpoint
• typescript-powerpoint

Package Sidebar

npm i pptxgenjs

Git github.com/gitbrent/PptxGenJS

gitbrent.github.io/PptxGenJS/

Downloads Weekly Downloads

Unpacked size, total files, last publish, collaborators.

• Business Today
• India Today
• India Today Gaming
• Cosmopolitan
• Harper's Bazaar
• Brides Today
• Aajtak Campus

• Budget 2024
• Magazine Cover Story Editor's Note Deep Dive Interview The Buzz
• BT TV Market Today Easynomics Drive Today BT Explainer
• Market Today Trending Stocks Indices Stocks List Stocks News Share Market News IPO Corner
• Tech Today Unbox Today Authen Tech Tech Deck Tech Shorts
• Money Today Tax Investment Insurance Tools & Calculator
• Mutual Funds
• Industry Banking IT Auto Energy Commodities Pharma Real Estate Telecom
• Visual Stories

INDICES ANALYSIS

Mutual funds.

• Cover Story
• Editor's Note
• Market Today
• Drive Today
• BT Explainer
• Trending Stocks
• Stocks List
• Stocks News
• Share Market News
• Unbox Today
• Authen Tech
• Tech Shorts
• Tools & Calculator
• Commodities
• Real Estate
• Economic Indicators
• BT-TR GCC Listing

'The last slide was so on point': Netizens react after woman makes presentation on mental health to criticise her workplace in exit interview

The woman, whose identity remains anonymous, chose to use her final moments as an employee to highlight the company's shortcomings in addressing employee mental health. Her presentation included data, personal anecdotes, and visual aids to illustrate the toxic work environment she experienced.

• Updated Aug 02, 2024, 9:12 PM IST

In a bold and unprecedented move, a woman has sparked a conversation about workplace mental health after delivering a powerful presentation during her exit interview. The presentation, which has since gone viral on social media, detailed the negative impact her job had on her mental well-being.

“Short, sweet and to the point!” the caption of the video read. The video starts with a text insert that reads, “I made a PowerPoint presentation for my exit interview at work. What do you think?” The video then displays slides from the presentation, featuring two charts that illustrate how her work has affected her mental health.

        View this post on Instagram                       A post shared by Betches Media (@betches)

Social media users have praised the woman's courage for speaking out and bringing attention to a critical issue. Many have shared similar experiences, highlighting the prevalence of mental health struggles in the workplace. The presentation has also sparked a wider debate about employers' responsibilities in creating supportive and mentally healthy work environments.

“The last slide and that’s so on point,” a user wrote on Instagram. “I cried yesterday. It’s now been 0 days since my last cry, lol,” another one added.

“Good for you. Started my own company and never looked back," a third one wrote. A fourth commented, “I think many folks are under the misguided opinion that work should be fun. Or even rewarding. For most it isn’t. Make your money. Go home. Stop complaining.”

TOP STORIES

• Advertise with us
• Privacy Policy
• Terms and Conditions
• Press Releases

Copyright©2024 Living Media India Limited. For reprint rights: Syndications Today

Add Business Today to Home Screen

'Avengers' star Robert Downey Jr. returns to Marvel – but as Doctor Doom

SAN DIEGO – Robert Downey Jr. is back in the Marvel Cinematic Universe and wearing armor again. But he's not Iron Man anymore.

Marvel had already won Comic-Con with a raucous screening of “Deadpool & Wolverine” at the pop-culture convention. Then the studio pulled its best surprise at a panel Saturday night: Downey will play the villainous Victor Von Doom in two upcoming "Avengers" movies, "Avengers: Doomsday" (in theaters May 2026) and "Avengers: Secret Wars" (May 2027).

Fans also got to see new footage from three movies with release dates in 2025: “ Captain America: Brave New World ” (Feb. 14) starring Anthony Mackie; the supergroup film “Thunderbolts” (May 5), with returning MCU veterans Sebastian Stan, Florence Pugh and David Harbour; and “ The Fantastic Four: First Steps ” (July 25) headlined by Pedro Pascal and Vanessa Kirby.

Here are all the highlights of the presentation:

Join our Watch Party! Sign up to receive USA TODAY's movie and TV recommendations right in your inbox

Robert Downey Jr. returns to the Marvel Cinematic Universe as Doctor Doom in 'Avengers: Doomsday,' Joe and Anthony Russo direct

“New mask, same task.” Robert Downey Jr. surprises Hall H to announce his return to the MCU as Doctor Doom. pic.twitter.com/j1SEjzse3p — Marvel Studios (@MarvelStudios) July 28, 2024

Kevin Feige says the Fantastic Four will be in the next two Avengers movies, and the guys directing those? Joe and Anthony Russo. "Oh, my God, we missed you guys. You are the best damn fans in the world," Joe Russo says. Anthony says they thought "Avengers: Endgame" would be their swan song, but now "we see a road forward."

Joe Russo calls the comic-book inspiration behind "Avengers: Secret Wars" "the biggest story Marvel Comics ever told." That's the 2027 "Avengers" title. But the Russos say they need a new character to introduce first: Doctor Doom! 2026's "Avengers: The Kang Dynasty" has now become "Avengers: Doomsday." And the guy playing Doom is none other than Robert Downey Jr., who comes out in a Doom mask before ripping it off.

"New mask, same task. What'd I tell you, I like playing complicated characters," Downey says.

'Fantastic Four' cast members hit the Comic-Con stage

And here comes "The Fantastic Four," a year from now. It starts filming Tuesday in the U.K. but director Matt Shakman is here. "I'm still standing," Shakman says after flying from London. "We want to be rooted in the comics but also rooted in life," he adds, to bring a sense of real-world science to Marvel's First Family. They're doing a setting of retrofuturistic New York in the 1920s, "where the right heart and mind can do anything." He introduces a clip reel of Pedro Pascal's nerdy Reed Richards and the rest of the team going up in space, and also a glimpse of the gigantic Galactus looking into a skyscraper.

The film has been retitled "The Fantastic Four: First Steps," and the whole cast arrives. (Surprise!) "New family," Pascal says about being in a Marvel movie. "Nobody knows that Matt and I have known each other for 25 years. He almost became my roommate" in the 1990s. Ebon Moss-Bachrach, who plays Ben Grimm (aka the Thing), says he got a very nice text message from Hulk Mark Ruffalo "to demystify the process of motion-capture."

Joseph Quinn, playing Human Torch Johnny Storm, adds that "it's a team sport and we're all going to bring a sense of family to this," while Vanessa Kirby (cast as Sue Storm) says she's laughed a lot in the rehearsals and gotten a kick out of the source material: "When you read the comics, there's such a joy to it." They also bring out a Fantasticar that hovers across the stage, which is pretty dang cool.

David Harbour dresses up as Red Guardian for 'Thunderbolts' talk

"Thunderbolts" is next. David Harbour comes out from the crowd in full Red Guardian garb and speaking in a Russian accent. "Oh, my God, you guys didn't dress up? I sent that email and we all said we were going to dress up because it was Comic-Con!" says a heartbroken Harbour to his castmates. (Julia Louis-Dreyfus did dress up, since she's a villain in nice clothes.) They still won't address what the asterisk means in the title treatment, but Sebastian Stan says Florence Pugh is a standout. "They don't play well together," Pugh says of the team dynamic, which puts together a mix of antiheroes and baddies. Hannah John-Kamen says her reintroduction of the Ghost will be "interesting."

Louis-Dreyfus explains that her character Valentina is "after power, control and she generally wants to kick ass in the Marvel universe." And Wyatt Russell, as the returning John Walker (aka U.S. Agent), feels the movie is "one of my favorite experiences." Pugh shouts out the stunt team: "We all like feeling cool doing stunts but I also appreciate that they look cooler sometimes." She also adds that the movie "is so wonderful and bizarre" before introducing the first trailer, who shows how a crew of bad guys are put together to deal with "worse guys."

Harrison Ford embraces his very Hulk side and wanted a piece of the MCU action

They show an amazing "Brave New World" clip that introduces the metal alloy adamantium – a link to the X-Men – and Ford's character turns into the Red Hulk. Ford is also here and takes the stage, acting like he's Hulking out. He is having so much fun. "I will make no reference to current history," he says of being the president. "I am delighted and proud to become a member of the Marvel universe. I have watched fantastic actors having a really good time and I wanted a piece of the action. ... It is fantastic. Marvelous, even."

'Captain America: Brave New World' star Giancarlo Esposito introduces his MCU baddie: Sidewinder

Feige brings out "Brave New World" cast members including Anthony Mackie, Giancarlo Esposito and Tim Blake Nelson. Tom Holland once asked Mackie if he had a movie, "and now I've got a movie!" Mackie says. Feige says the new movie returns to the "grounded action movie" vibe of "Captain America: The Winter Soldier." Mackie adds that Sam Wilson's "not the musclebound guy. He's more of a thoughtful character."

Nelson's back as the Leader, an old-school Hulk villain, after 16 years since "The Incredible Hulk." "They wrote a great story for him and I think people are going to be pretty excited," he teases. And "Top Gun: Maverick" flyboy Danny Ramirez is introduced as the new Falcon: "I feel at home in the skies." And Esposito is making his MCU debut. "It was fan casting that linked us together," he said. He also mentioned his character for the first time: Sidewinder, head of the Serpent Society.

Marvel panel kicks off, Deadpool style (with some extra Madonna)

The Hall H crowd is a rowdy bunch as the Marvel opening fanfare plays, Deadpool style, and a choir in red and yellow comes out to sing Madonna's "Like a Prayer" – the unofficial theme song of "Deadpool & Wolverine" – as Wolverine and Deadpool cosplayers dance down the aisles. Marvel honcho Kevin Feige comes out, and "Deadpool" actor Rob Delaney is the moderator. Peterpool!

Check out the ‘Brave New World’ trailer (with Harrison Ford!)

Harrison Ford is already a Disney legend, considering he’s Han Solo and Indiana Jones. But now he’s joined the Marvel family, playing President “Thunderbolt” Ross (a character portrayed by Willian Hurt until his death in 2022) in “Brave New World.” While you’re waiting for the panel, peep the new trailer for the political thriller, which stars Anthony Mackie as the new man with the star-spangled shield.

Ryan Reynolds, Hugh Jackman join the Marvel Cinematic Universe

“Deadpool & Wolverine” marks the MCU debuts of Ryan Reynolds and Hugh Jackman’s characters from the earlier Fox Marvel movies. (Reynolds’ Deadpool even jokes about Jackman’s fan favorite Wolverine: “Disney’s going to have him in the suit until he’s 90.”) It’s a major move in the MCU, but the goal with them at first wasn’t to go for the “big shiny toys,” Reynolds told USA TODAY in an interview . “I can kind of promise that no matter what we do, no matter what we surprise people with, it will always have a drop of restraint, because that's what makes it interesting.”

• Election 2024
• Entertainment
• Newsletters
• Photography
• AP Buyline Personal Finance
• AP Buyline Shopping
• Press Releases
• Israel-Hamas War
• Russia-Ukraine War
• Global elections
• Asia Pacific
• Latin America
• Middle East
• Delegate Tracker
• AP & Elections
• 2024 Paris Olympic Games
• Auto Racing
• Movie reviews
• Book reviews
• Financial Markets
• Business Highlights
• Financial wellness
• Artificial Intelligence
• Social Media

Paris’ Olympics opening was wacky and wonderful — and upset bishops. Here’s why

Paris Olympics organizers apologized to anyone who was offended by a tableau that evoked Leonardo da Vinci’s “The Last Supper” during the glamorous opening ceremony, but defended the concept behind it Sunday. Da Vinci’s painting depicts the moment when Jesus Christ declared that an apostle would betray him. The scene during Friday’s ceremony featured DJ and producer Barbara Butch — an LGBTQ+ icon — flanked by drag artists and dancers.

Delegations arrive at the Trocadero as spectators watch French singer Philippe Katerine performing on a giant screen, in Paris, during the opening ceremony of the 2024 Summer Olympics, Friday, July 26, 2024 in Paris. (Ludovic Marin/Pool Photo via AP)

• Copy Link copied

Paris Olympics

• Sha’Carri Richardson won her first-ever race at the Olympics in 10.94 seconds to easily qualify for the semifinals.
• Here’s what to watch as the track and field competition kicks off.
• Take a look at everything else to watch on Friday .
• See AP’s top photos from the 2024 Paris Olympics.
• Olympic schedule of events and follow all of AP’s coverage of the Summer Games .
• Which countries are in the lead? Take a look at the Olympic medal tracker .
• Want more? Sign up for our daily Postcards from Paris newsletter.

PARIS (AP) — Paris: the Olympic gold medalist of naughtiness.

Revolution ran like a high-voltage wire through the wacky, wonderful and rule-breaking Olympic opening ceremony that the French capital used to astound, bemuse and, at times, poke a finger in the eye of global audiences on Friday night.

That Paris put on the most flamboyant, diversity-celebrating, LGBTQ+-visible of opening ceremonies wasn’t a surprise. Anything less would have seemed a betrayal of the pride the French capital takes in being a home to humanity in all its richness.

But still. Wow. Paris didn’t just push the envelope. It did away with it entirely as it hammered home a message that freedom must know no bounds.

A practically naked singer painted blue made thinly veiled references to his body parts. Blonde-bearded drag queen Piche crawled on all fours to the thumping beat of “Freed From Desire” by singer-songwriter Gala, who has long been a potent voice against homophobia . There were the beginnings of a menage à trois — the door was slammed on the camera before things got really steamy — and the tail end of an intimate embrace between two men who danced away, hugging and holding hands.

“In France, we have the right to love each other, as we want and with who we want. In France, we have the right to believe or to not believe. In France, we have a lot of rights. Voila,” said the audacious show’s artistic director, Thomas Jolly.

Jolly, who is gay, says being bullied as a child for supposedly being effeminate drove home early on how unjust discrimination is.

The amorous vibe and impudence were too much for some.

“Know that it is not France that is speaking but a left-wing minority ready for any provocation,” posted far-right French politician Marion Maréchal, adding a hashtagged “notinmyname.”

Here’s a closer look at how Paris both awed and shocked.

A 21st-century update of Leonardo da Vinci’s ‘Last Supper’

DJ and producer Barbara Butch, an LGBTQ+ icon who calls herself a “love activist,” wore a silver headdress that looked like a halo as she got a party going on a footbridge across the Seine, above parading athletes — including those from countries that criminalize LGBTQ+ people. Drag artists, dancers and others flanked Butch on both sides.

The tableau brought to mind Leonardo da Vinci’s “Last Supper,” which depicts the moment when Jesus Christ declared that an apostle would betray him.

Jolly says that wasn’t his intention. He saw the moment as a celebration of diversity, and the table on which Butch spun her tunes as a tribute to feasting and French gastronomy.

“My wish isn’t to be subversive, nor to mock or to shock,” Jolly said. “Most of all, I wanted to send a message of love, a message of inclusion and not at all to divide.”

Still, critics couldn’t unsee what they saw.

“One of the main performances of the Olympics was an LGBT mockery of a sacred Christian story - the Last Supper - the last supper of Christ. The apostles were portrayed by transvestites,” the spokesperson for Russia’s Foreign Ministry, Maria Zakharova, posted on Telegram.

“Apparently, in Paris they decided that since the Olympic rings are multi-colored, they can turn everything into one big gay parade,” she added.

The French Catholic Church’s conference of bishops deplored what it described as “scenes of derision and mockery of Christianity” and said “our thoughts are with all the Christians from all continents who were hurt by the outrage and provocation of certain scenes.”

LGBTQ+ athletes, though, seemed to have a whale of a time. British diver Tom Daley posted a photo of himself recreating the standout Kate Winslet-Leonardo DiCaprio scene from “Titanic,” only with the roles reversed: He was at the boat’s prow with arms outstretched, as rower Helen Glover held him from behind.

Is that a revolver in your pocket?

When a giant silver dome lifted to reveal singer Philippe Katerine reclining on a crown of fruit and flowers, practically naked and painted blue, audiences who didn’t think he was Papa Smurf may have guessed that he represented Dionysus, the Greek god of wine and ecstasy.

But unless they speak French, they may not have caught the cheekiness of his lyrics.

“Where to hide a revolver when you’re completely naked?” he sang, pointing down to his groin. “I know where you’re thinking. But that’s not a good idea.”

“No more rich and poor when you go back to being naked. Yes,” Katerine continued.

Decades after Brigitte Bardot sang “Naked in the Sun,” this was Paris’ reminder that everyone starts life in their birthday suit, so where’s the shame?

Paris museums are full of paintings that celebrate the human form. Gustave Courbet’s “Origin of the World” hangs in the Musée d’Orsay. The 16th-century “Gabrielle d’Estrées and one of her sisters,” showing one bare-breasted woman pinching the nipple of another, hangs in the Louvre.

France sends a message

Clad in a golden costume, French-Malian pop star Aya Nakamura strode confidently out of the hallowed doors of the Institut de France, a prestigious stronghold of French language, culture and commitment to freedom of thought. Even without a note being sung, the message of diversity, inclusion and Black pride was loud.

The most listened-to French-speaking artist in the world was a target of fierce attacks from extreme-right activists when her name emerged earlier this year as a possible performer at the show. Paris prosecutors opened an investigation of alleged racism targeting the singer.

Nakamura performed with musicians of the French military’s Republican Guard, who danced around her.

Au revoir, closed minds and stuffy traditions.

Off with their head!

When London hosted the Summer Games in 2012, it paid homage to the British monarchy by giving Queen Elizabeth II a starring role in the opening ceremony. Actor Daniel Craig, in character as James Bond, was shown visiting the head of state at Buckingham Palace before the pair appeared to parachute out of a helicopter over the stadium.

The French love to joyfully tease their neighbors across the English Channel and, perhaps not incidentally, took a totally different, utterly irreverent tack.

A freshly guillotined Marie Antoinette, France’s last queen before the French Revolution of 1789, was shown clutching her severed head, singing: “The aristocrats, we’ll hang them.” Then, heavy metal band Gojira tore the Paris evening with screeching electric guitar.

Freedom: Does anyone do it better than the French?

AP journalists Sylvie Corbet in Paris and Jim Heintz in Tallinn, Estonia, contributed.

For more coverage of the Paris Olympics, visit https://apnews.com/hub/2024-paris-olympic-games .

Paris 2024 apologizes for 'Last Supper' sketch after criticism

• ESPN News Services

Paris Olympics organizers apologized to anyone who was offended by a tableau that evoked Leonardo da Vinci's "The Last Supper" during the glamorous opening ceremony, but defended the concept behind it Sunday.

The segment, which recreated the Biblical scene of Jesus Christ and his apostles sharing a last meal before crucifixion, featured drag queens, a transgender model and a naked singer made up as the Greek god of wine, Dionysus.

"Clearly there was never an intention to show disrespect to any religious group. [The opening ceremony] tried to celebrate community tolerance," Paris 2024 spokesperson Anne Descamps said at a news conference. "We believe this ambition was achieved. If people have taken any offense, we are really sorry."

The interpretation of the Greek God Dionysus makes us aware of the absurdity of violence between human beings. #Paris2024 #OpeningCeremony pic.twitter.com/FBlQNNUmvV — The Olympic Games (@Olympics) July 26, 2024

Artistic director Thomas Jolly tried to draw attention away from "The Last Supper" references after the opening ceremony, saying that hadn't been his intention.

"We wanted to talk about diversity. Diversity means being together. We wanted to include everyone, as simple as that," Jolly told reporters Saturday.

The Catholic church in France was among those criticizing the segment, calling it "mockery of Christianity."

Supporters of the tableau praised its message of inclusivity and tolerance.

Reuters and The Associated Press contributed to this report.

This Was the Best Opening Ceremony Paris Could Give Us?

The city seemed exhausted, not exuberant.

Produced by ElevenLabs and News Over Audio (NOA) using AI narration.

Well, that was a nice idea in theory. Paris held the first-ever Olympics opening ceremony to take place outside a stadium—and on one of the loveliest settings in the world, the Seine. Athletes paraded not by foot but by boat, waving flags from sleek cruising pontoons, as pageantry unfolded on bridges and riverbanks. The aquatic format promised to do more than just showcase the architectural beauty of Paris or convey the magic of strolling across the Pont Neuf with fresh bread in hand. It promised to offer the world—our ever more jaded, content-drowned world—something new to look at.

Unfortunately, that new thing was a mess. Some will blame the rain, which soaked the festivities for hours, adding an air of tragedy as athletes waved flags from within their ponchos. But even on a sunnier day, the ceremony would have served as an example of how not to stage a spectacle for live TV. The energy was low, the pacing bizarre, and the execution patchy. Paris tried to project itself as a modern, inclusive hub of excitement—but it mostly just seemed exhausted.

Olympics opening ceremonies are inevitably ridiculous affairs, usually in a fun way. The host nation must welcome the global community while cobbling all of the signifiers of its own identity into some sort of romping medley that also, ideally, expands that country’s image in helpful ways. London offered the Queen and James Bond, and also a tribute to the National Health Service. Rio hosted a rumbling dance party as well as a briefing on Brazil’s Indigenous history. Most important, both of those cities gave us good TV.

Beforehand, the Paris event’s artistic director, Thomas Jolly, announced his intentions to play with Gallic clichés. Key words— liberté , synchronicité , and so on—announced thematic chapters, but a narrative hardly cohered. Congratulations if you had the following on your bingo card: mimes, Louis Vuitton, parkour, Les Mis é rables , the cancan, lasers shooting out of the Eiffel Tower , allusions to ménages à trois. But credit where it’s due—I really did not foresee the Minions stealing the Mona Lisa and bringing it aboard a Jules Verne–style submarine. On reflection, that was the most educational part of the show: learning that a Frenchman co-directed Despicable Me .

One problem with this French fever dream is that much of it was prerecorded. Every few minutes, the telecast would cut to slick cinematography of a masked, hooded individual—that’s what the NBC broadcasters kept calling her, “the Individual”—sneaking the Olympic torch around. She went to the Louvre, where the paintings came to life. She went to a movie screening, where a Lumière-brothers film ... came to life. These segments hit with all the force of a cruise-ship commercial, while distracting from the novelty of having a ceremony on water in the first place.

The live components of the show weren’t much more vibrant. A bridge was converted into a runway on which fashion models and drag queens strutted with the gusto and precision of a forced march. Platforms over the river itself featured extreme-sports performers doing tricks that the TV cameras seemed suspiciously afraid of showing in close-up. Lady Gaga put on a feather-laden cabaret performance that was perfectly fine, save for the fact that “perfectly fine” shouldn’t be anywhere near the name Lady Gaga. (As it turns out, that performance was prerecorded too.)

One of the only showstopping moments made clear that the weird vibes of the ceremony could largely be blamed on the detail work. At one point, the camera cut to a woman dressed as Marie Antoinette and holding her own babbling, chopped-off head. The heavy-metal band Gojira broke into riffage, and flames fired. This was righteous. But then, not much happened. Viewers were left to grow bored with static, wide shots of the performance. Eventually, a fake boat wheeled into view, looking quite a bit like a prop from a high-school play.

The best bits took place firmly on land. The pop star Aya Nakamura danced with the French Republican Guard in a flashy meeting of old and new cultural regimes. Once the sun set, “the Individual” emerged in real life to ride a cool-looking mechanical horse down the Seine. (It must be said that this journey was interminable.) The Olympic cauldron was cool too: It resembled a hot-air balloon, and it rose into the air when lit. To finish things off, Celine Dion made her seemingly unlikely return to singing, heaving with emotion from a deck of the Eiffel.

Perhaps it is no coincidence that carefully composed, largely stable images were the highlights of a show that tried to reinvent the Olympic ceremony in fluid directions. My favorite moment was when the pianist Alexandre Kantorow played Maurice Ravel’s Jeux d’Eau from a bridge as rain puddled on his instrument. He looked sad and soaked but also unbothered, lost in music. He made me remember the word I’d been trying to think of, for one of those ineffable French feelings: malaise .

About the Author

More Stories

Zach Bryan’s Message to Men

The ‘Espresso’ Theory of Gender Relations

Olympics Organizers Apologize After Drag Queen ‘Last Supper’ Slammed By Conservatives

• Share to Facebook
• Share to Twitter
• Share to Linkedin

Organizers of the Paris Olympics have apologized for any offense caused by a skit in the games' opening ceremony Friday that featured drag stars in what many viewers saw as a parody of Leonardo Da Vinci’s famous “The Last Supper" masterpiece, a similarity that drew the ire of Catholic leaders and conservatives like Elon Musk and Donald Trump Jr.

An overview of the Trocadero venue with the Eiffel Tower in the background, in Paris, during the ... [+] opening ceremony of the 2024 Summer Olympics.

Anne Descamps, a spokesperson for the Paris games, told reporters on Sunday there was "never an intention to show disrespect to any religious group" and Thomas Jolly, creative director of the opening ceremony, instead hoped to "celebrate community tolerance," according to multiple news outlets.

She said the scene was generally well received but that organizers are "of course, really, really sorry" to anyone who was offended.

The skit saw LGBTQ+ icon Barbara Butch don a silver, halo-like headdress while seated in the center of a table with other drag artists on a footbridge, while parading athletes floated underneath on the Seine.

Though organizers said the skit was an "interpretation of the Greek God [of wine and festivity] Dionysus," the visual similarities to "The Last Supper" were immediately spotted and criticized by those who said it was an offensive depiction of a classic religious scene in “The Last Supper,” which depicts Jesus and the 12 apostles.

Jolly on Friday said the scene wasn’t meant to be a direct recreation of “The Last Supper” and that the group sitting around the table was instead a celebration of feasting and French gastronomy.

Get Forbes Breaking News Text Alerts: We’re launching text message alerts so you'll always know the biggest stories shaping the day’s headlines. Text “Alerts” to (201) 335-0739 or sign up here .

Crucial Quote

“My wish isn’t to be subversive, nor to mock or to shock,” Jolly said. “Most of all, I wanted to send a message of love, a message of inclusion and not at all to divide.”

Chief Critics

Right-wing pundits and some lawmakers said the skit was a mockery of the Christian faith, and one prominent Catholic leader said it was an example of a “deeply secularist postmodern society." Billionaire Elon Musk called the skit “extremely disrespectful to Christians” and House Speaker Mike Johnson , R-La., said the scene was “shocking and insulting to Christian people around the world.” Others to criticize the scene have included Donald Trump Jr., Kansas City Chiefs kicker Harrison Butker, Piers Morgan and several Catholic bishops.

Recreations of “Last Supper” are not uncommon and have not often been met with the same kind of backlash as what followed the Olympic opening ceremony. Popular TV shows like “Lost,” “House,” “Battlestar Galactica,” “The Sopranos” and “The Simpsons,” among others, have posed their actors in similar photos, and art with celebrities like Marilyn Monroe, Freddie Mercury and Bill Murray portraying Jesus are readily available online.

Further Reading

• Editorial Standards
• Reprints & Permissions

Join The Conversation

One Community. Many Voices. Create a free account to share your thoughts. 

Forbes Community Guidelines

Our community is about connecting people through open and thoughtful conversations. We want our readers to share their views and exchange ideas and facts in a safe space.

In order to do so, please follow the posting rules in our site's  Terms of Service.   We've summarized some of those key rules below. Simply put, keep it civil.

Your post will be rejected if we notice that it seems to contain:

• False or intentionally out-of-context or misleading information
• Insults, profanity, incoherent, obscene or inflammatory language or threats of any kind
• Attacks on the identity of other commenters or the article's author
• Content that otherwise violates our site's  terms.

User accounts will be blocked if we notice or believe that users are engaged in:

• Continuous attempts to re-post comments that have been previously moderated/rejected
• Racist, sexist, homophobic or other discriminatory comments
• Attempts or tactics that put the site security at risk
• Actions that otherwise violate our site's  terms.

So, how can you be a power user?

• Stay on topic and share your insights
• Feel free to be clear and thoughtful to get your point across
• ‘Like’ or ‘Dislike’ to show your point of view.
• Protect your community.
• Use the report tool to alert us when someone breaks the rules.

Thanks for reading our community guidelines. Please read the full list of posting rules found in our site's  Terms of Service.

Israel war on Gaza updates: Fears of escalation grow after Haniyeh killing

These were the updates on Israel’s war on Gaza for Wednesday, July 31.

This live page is now closed. You can continue to follow our coverage of the war in Gaza here.

• Hamas says its political chief Ismail Haniyeh was killed in an Israeli missile attack in Iran’s capital, Tehran.
• The strike drew threats of revenge and stoked further fears of a wider escalation in Israel’s war on Gaza.
• Hezbollah has confirmed the death of its military commander Fouad Shukr, targeted by Israel yesterday in a strike on Beirut.
• Al Jazeera journalist Ismail al-Ghoul and camera operator Rami al-Refee have been killed in an Israeli attack on Gaza.
• At least 39,445 people have been killed and 91,073 wounded in Israel’s war on Gaza . An estimated 1,139 people were killed in Israel during the Hamas-led attacks on October 7 and more than 200 were taken captive.

Thanks for joining us

This live page is now closed.

For more on the killing of Hamas chief Ismail Haniyeh in Iran, read our explainer here .

You can also read about Fuad Shukr, the Hezbollah commander killed by Israel in Beirut here .

For more on Al Jazeera journalists Ismail al-Ghoul and Rami al-Rifi killed by an Israeli strike in the Shati refugee camp, you can read our article here .

And you can always find our latest coverage of Israel’s war on Gaza here .

What happened on Wednesday?

We will be moving our live coverage of Israel’s war on Gaza to a new live page shortly.

But before we do that, here is a recap of what has happened today:

• Hamas political chief Ismail Haniyeh was killed in Iran’s capital, Tehran.
• Hezbollah confirmed its top commander Fuad Shukr was killed in Tuesday’s Israeli strike on Beirut.
• An Al Jazeera journalist and a camera operator were killed in an Israeli attack on Gaza. Ismail al-Ghoul and Rami al-Rifi – both 27 – were killed in the Shati refugee camp in an Israeli strike on their vehicle.
• Several countries, including Germany and the US, have urged their citizens to either leave Lebanon or not visit at all at this time.
• Protests have erupted in the occupied West Bank, Tunisia and Turkey to condemn Haniyeh’s killing.
• Yemen’s Houthis have said that Israel should expect a “wave of retaliation” following Haniyeh’s assassination.
• UN Secretary-General Antonio Guterres has denounced strikes on Beirut and Tehran as a “dangerous escalation”.

Latest casualty figures

‘Decades of assassinations unable to thwart Palestinian resistance’

Fathi Nimer, Palestine policy fellow at Al-Shabaka – a global independent Palestinian think tank – says Palestinians will remember Haniyeh as “someone who was true to his origin”.

Having grown up as a refugee in Gaza, he lived the Palestinian experience – attending UNRWA schools and working to support his family, Nimer told Al Jazeera. Haniyeh “played integral parts in multiple milestones in Palestinian history”.

In the 2006 legislative elections, Haniyeh was nominated as Hamas’s top candidate for the legislative council, and after an electoral victory, he was appointed prime minister.

“To this day, Haniyeh remains the only Palestinian prime minister to reach that position through the popular mandate of the ballot box,” Nimer said. “He will be remembered as someone who was true to his origin, he practised what he preached, and his position never shielded him from the ravages of Israel’s siege and bombardment.

“His children and grandchildren were among the tens of thousands of victims of Israel’s genocide. He was assassinated like his predecessors, and it is possible that his successors might also face a similar fate. Yet it remains clear that decades of these assassinations were unable to thwart Palestinian resistance, and their capabilities continue to develop and tip the balance of power in the region.”

Who was Ismail Haniyeh, the Hamas political chief killed in Iran?

Haniyeh, 62, has been killed in Iran’s capital, Tehran, shortly after attending the swearing-in ceremony of Iran’s newly elected president.

Read our story for what we know about him and his life from birth and imprisonment to becoming the political leader of Hamas.

Lebanon warns UNSC that war would ‘spread to the whole world’

Lebanon’s Charges d’Affaires for the UN, Hadi Hachem, has warned the UNSC that a conflict in the Middle East would have global repercussions.

He said that while the exact circumstances behind the attack on Majdal Shams were still unknown, it could have taken place because “Israel has occupied the area since 1967” while failing to implement numerous UN resolutions calling for it to withdraw from the Golan Heights and other occupied territories.

“Israel’s claim that it seeks to protect the population it occupies is a display of hypocrisy,” Hachem said.

“The real goal of Israel is to prolong and escalate the hostilities and it is ironic that the killer of tens of thousands of children in Gaza sheds tears for the children of the occupied Syrian Golan.”

Hachem also warned the international community to prevent the outbreak of a regional conflict. “What starts in the Middle East will spread to the whole world,” he said.

More reactions from UN Security Council members

Here are what some of the members of the UN Security Council said at the emergency meeting on the assassination of Hamas political chief Ismail Haniyeh:

• China: “This act was a blatant attempt to sabotage peace efforts. [China urges Israel] to halt all its military operations in Gaza and immediately stop its collective punishment of the people in Gaza.”
• France: “We call for the utmost responsibility and restraint in order to avoid a regional conflagration.”
• Guyana: “The history of colonialism has shown us, Mr President, that no people consent to subjugation and certainly not of the kind that Israel has visited on the Palestinian people. The desire for freedom is innate.”
• Malta: “Efforts towards an immediate and permanent ceasefire to the Israel-Hamas conflict in Gaza must not cease.”
• Russia: The “political assassination [of Ismail Haniyeh] … strikes a serious blow, primarily for the mediated negotiations between Hamas and Israel aimed at a ceasefire in Gaza.”

Syria says Golan Heights attack ‘weaponised’ by Israel 

Syria’s UN ambassador Koussay al-Dahhak has dismissed as “lies” claims that a rocket attack on Majdal Shams, in the occupied Golan Heights , targeted Israel’s population.

“Syria reiterates that Syrian Arab Golan is and has always been Syrian Arab territory,” al-Dahhak said, adding that the Druze community that lives in the area has long rejected Israeli citizenship.

The attack was nonetheless “weaponised by Israel to continue its aggression on the states of the region”, he added.

Al-Dahhak also contested Israel’s claim that it is defending itself. “Syria reiterates that an occupying entity cannot claim that they are defending themselves,” he said.

Israel calls Iran ‘engine of death and destruction’ at UNSC 

Israel’s representative, Jonathan Miller, has told the UN Security Council that its emergency meeting had been called for by the world’s greatest “sponsor of terrorism”, Iran.

“Iran is not merely a sponsor of terrorism, it is the very machine driving the engine of death and destruction that threatens us all,” he said.

“We urge the international community to hold Tehran accountable for its crimes,” Miller added, citing the recent rocket attack on Majdal Shams as an example. The Iran-backed Hezbollah group has denied responsibility.

By contrast, Miller said Israel conducted a “precise strike against a Hezbollah commander, a senior terrorist with the blood of Israelis and many others on his hands”.

Haniyeh’s assassination shows Israel intends to expand the war to the entire region: Iran

The Iranian ambassador to the UN has addressed the UN Security Council. Here are the main points made by Amir Saeid Iravani during the emergency meeting:

• Haniyeh’s assassination is another manifestation of Israel’s decades-long pattern of terrorism and sabotage targeting Palestinians and their supporters.
• Israel was also pursuing the political goal of disrupting the first day of Iran’s new government.
• Iran condemns in the strongest possible terms this terrorist act and the most serious violation of international law and national security.
• This is a serious breach of peace and security that requires immediate action by the UN Security Council.
• It also suggests that Israel’s intention is to expand the war to the entire region.

March in support of Palestine in Tunisian city of Sfax

We reported earlier of pro-Palestine demonstrations being held in Tunis.

Tunisian activists on Wednesday also turned up in large numbers for a march in support of Gaza in the streets of the southeastern city of Sfax.

The participants waved the Palestinian flag and the flags of the resistance factions and chanted slogans in support of the Palestinian cause.

Israel ‘must be stopped’, Palestinian official tells UNSC

Feda Abdelhady Nasser, the deputy permanent observer of the State of Palestine to the UN, has told the Security Council that “Israel has been the oppressor, tormentor and murderer of Palestinians for decades, and it is the longstanding destabiliser of our region”.

“It must be stopped,” she said. “We call once again with utmost urgency on the Security Council, General Assembly and all law-abiding, peace-loving nations to act forthwith to bring a halt to the horrific, criminal Israeli aggressions against the Palestinian people and on our region.”

Nasser demanded accountability for the killing of Haniyeh and for the “murder and injury of over 130,000 Palestinian children, women and men across these past 300 days of horror and hell in Gaza”.

“The international community has a choice to make – let it be for peace and security, do not let Israel drag us all to the abyss,” she added.

WATCH: What is the fallout from the killing of Ismail Haniyeh in Tehran?

Uk resolute in support to israel and its ‘right to defend itself’.

Barbara Woodward, UK ambassador to the UN, has told the UNSC that the UK is resolute in its support for Israel and its “right to defend itself in line with international humanitarian law”.

Woodward cited the drone strike by Yemen’s Houthi group on Tel Aviv earlier this month and the rocket attack on Majdal Shams on Sunday as evidence of Iran’s destabilising action.

“We have repeatedly been clear in this council of Iran’s role in destabilising the region through its use of proxies, including Lebanese Hezbollah and Yemen’s Houthis. This must cease,” the UK ambassador said.

“The attempt of Iran and its proxies to use the war in Gaza as justification for further violence is perverse, and we reject it entirely.”

WATCH: Al Jazeera correspondent, cameraman killed in Gaza

A reminder that earlier today, Israeli strikes targeted and killed Al Jazeera Arabic correspondent Ismail al-Ghoul and his camera operator Rami al-Rifi in Gaza City.

US ‘not aware or involved in’ killing of Haniyeh

Wood, who is addressing the UN Security Council on behalf of the US, says Washington was “not aware of or involved in the death of Hamas leader Ismail Haniyeh”.

“We have no independent confirmation as to Hamas’s claims regarding his death,” the US official said. “It is best not to speculate on the impact that these events will have. A broader war is neither imminent or inevitable.”

Wood urged the UNSC to pressure Iran to stop escalating its attacks on Israel through its proxies, as well as arming and financing “terrorist groups”.

US calls on UNSC to stand with Israel

Robert Wood, US deputy ambassador to the UN, has taken the floor at the Security Council.

The US has again blamed Hezbollah for the rocket attack on a football field in Majdal Shams on Sunday, despite the Lebanese group having denied responsibility.

“We call on the Security Council to send an unambiguous message to Hezbollah by standing with Israel as it defends itself against Hezbollah’s repeated attacks,” Wood said.

He added that other Iranian-backed groups have been conducting “brazen attacks” that endanger regional peace.

If Iran does not abide by UNSC resolutions, then the body must consider taking additional measures to “hold Iran accountable and address repeated action by its terrorist proxies”, he said.

WATCH: What is the fallout from Haniyeh’s killing in Tehran?

Tunisians protest assassination of haniyeh.

Hundreds of people gathered in Tunis to protest Haniyeh’s assassination.

The demonstrators, carrying Palestinian flags and chanting slogans, expressed their outrage at what they viewed as a targeted attack by Israel in Tehran.

The assassination took place less than 24 hours after Israel said it killed Hezbollah’s most senior military commander in the Lebanese capital Beirut.

If you’re just joining us

Let’s bring you up to speed with the latest developments:

• Hezbollah confirmed its top commander Fuad Shukr was killed in an Israeli strike on Beirut.
• An Al Jazeera journalist and a camera operator killed in an Israeli attack on Gaza. Ismail al-Ghoul and Rami al-Rifi – both 27 – were killed in Shati refugee camp in an Israeli strike on their vehicle.
• Several countries, including Germany and the US, have urged their citizens to either leave Lebanon or not to visit at all at this time.

UN Security Council emergency meeting over Hamas chief killing begins

UN Under-Secretary-General Rosemary DiCarlo is giving the opening remarks at the emergency meeting over the killing of Hamas chief in Tehran.

DiCarlo said a path to de-escalation is needed at this dangerous time.

“The international community must work together to avoid any action that will make the conflict much bigger and wider very quickly,” she said.

“We need swift diplomatic efforts towards de-escalation [and] the Security Council plays a crucial role in this regard.”

Qatar, Egypt question future of Gaza talks after Haniyeh’s killing

Qatar and Egypt, key players in the ceasefire talks between Israel and Hamas, have questioned the future of negotiations following the assassination of Haniyeh.

“Political assassinations and continued targeting of civilians in Gaza while talks continue leads us to ask, how can mediation succeed when one party assassinates the negotiator on the other side?” Qatar’s PM wrote on X.

“Peace needs serious partners & a global stance against the disregard for human life.”

Egypt’s Ministry of Foreign Affairs said a “dangerous Israeli escalation policy” over the past two days had undermined efforts to broker an end to the fighting in Gaza where almost 40,000 Palestinians have been killed by Israeli attacks since October last year.

Read our story here .

Pro-Palestine demonstrations take place in Istanbul

Thousands of pro-Palestinian protesters have marched through the streets of Istanbul after Haniyeh’s killing.

Haniyeh was assassinated in Tehran earlier today.

Turkey condemned the assassination, saying the attack aimed to spread the Israeli war in Gaza on a regional level.

“It has been revealed once again that the government of Netanyahu has no intention of achieving peace,” Turkey’s foreign ministry said in a statement.

Although the strike on Haniyeh was widely assumed to have been carried out by Israel, Israel made no claim of responsibility and said it would make no comment on the killing.

Germany calls for restraint, asks citizens to leave Lebanon

The German foreign ministry has called for restraint, urging all parties and “especially Iran” to “de-escalate for the sake of the people in the region.”

“In this tense situation, any decision can either ease tensions or escalate the conflict,” it said in a statement on X.

While condemning the attacks perpetrated by Lebanon’s Hezbollah and the “terrorist organisation Hamas,” which “carries out countless cruel attacks on Israel”, it made no mention of Israel’s ongoing war in Gaza or negotiations for a ceasefire.

The office also said that “given the circumstances” it was once again appealing to all of its citizens to leave Lebanon “while it is still possible”.

Protests in the occupied West Bank after Haniyeh assassination

Reporting from Ramallah, occupied West Bank

A protest has been going on in downtown Ramallah condemning the killing of Ismail Haniyeh, and similar demonstrations have been going on across the West Bank, bringing life to a halt amid a general strike.

We’ve been hearing calls during these protests for Palestinian unity, this is a demand we’ve been hearing again and again as people want the leadership to come together and bring divisions between Fatah and Hamas to an end.

They’ve been reading the news of a “national unity” agreement with apathy and they want to see action being taken and the deal implemented.