wyozi/react-pptx

Create PowerPoint presentations with React

react-pptx

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

import {
  Presentation, Slide, Text,
  Shape, Image, render
} from "react-pptx";
import fs from "fs";

render(
  <Presentation>
    <Slide>
      <Text style={{
        x: 3, y: 1, w: 3, h: 0.5,
        fontSize: 32
      }}>
        Hello there!
      </Text>
      <Shape
        type="rect"
        style={{
          x: 3, y: 1.55, w: 3, h: 0.1,
          backgroundColor: "#FF0000"
        }}
      />
    </Slide>
    <Slide>
      <Image
        src={{
          kind: "path",
          path: "https://picsum.photos/id/237/460/300"
        }}
        style={{
          x: "10%", y: "10%", w: "80%", h: "80%"
        }}
      />
    </Slide>
  </Presentation>
).then(buffer => {
  fs.writeFile("presentation.pptx", buffer);
});

Api

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).

Props

name	type	default value	description
children	React.ReactElement<PresentationProps>		The Presentation component to preview.
slideStyle	React.CSSProperties		Optional styles to apply to each slide in the preview.
drawBoundingBoxes	boolean	false	Whether to draw bounding boxes around each slide object in the preview.

<Presentation>

Wraps the whole presentation.

Props

name	type	default value	description
layout	"16x9", "16x10", "4x3", or "wide"	"16x9"	Slide size

<Slide>

Represents each slide in the presentation.

Props

name	type	default value	description
hidden	boolean	false	Whether this slide is hidden during presenting
style.backgroundColor	color		Slide background color
style.backgroundImage	{kind: "path", path: ""} | {kind: "data", data: ""}		Background image url

<Text>

Text layer

Props

name	type	default value	description
style.x	number (inches) or string (percentage)		Absolute x coordinate
style.y	number (inches) or string (percentage)		Absolute y coordinate
style.w	number (inches) or string (percentage)		Absolute width
style.h	number (inches) or string (percentage)		Absolute height
style.color	color		Text color
style.fontFace	string	Arial	Font family. Try to stick to web-safe fonts
style.fontSize	number (points)	18	Font size. Defined in points (96 dpi by default)
style.bold	boolean	false	Whether text is bold or not
style.italic	boolean	false	Whether text is italic or not
style.underline	boolean	false	Whether text is underlined or not
style.subscript	boolean	false	Whether text is subscript or not
style.superscript	boolean	false	Whether text is superscript or not
style.strike	boolean	false	Whether text has a strikeout or not
style.inset	boolean	false	Whether text is inset or not
style.align	"left" or "center" or "right"	undefined	Horizontal text alignment within the text box
style.verticalAlign	"top" or "middle" or "bottom"	undefined	Vertical text alignment within the text box
style.paraSpaceAfter	number (points)		Paragraph spacing after the text
style.paraSpaceBefore	number (points)		Paragraph spacing before the text
style.charSpacing	number (points)		The amount of spacing between characters, between 1-256
style.lineSpacing	number (points)		Space between each line
style.margin	number (points) or [number, number, number, number]		Similar to CSS padding, 0-99
style.rotate	integer		Degrees of text rotation, between 0-360
rtlMode	boolean	false	Whether text is displayed in right-to-left or not
lang	string	en-US	Setting for language, useful for non-English fonts

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>.

name	type	default value	description
type	"bullet" or "number"	"bullet"	Whether to use a bulleted list or numbered list
characterCode	string	undefined	Bullet character code (unicode)
indent	number	27	Indentation (space between bullet and text) (points)
numberType	string	undefined	The numbering type to use (Number type, see below)
numberStartAt	number	undefined	Number bullets start at
rtlMode	boolean	false	Whether text is displayed in right-to-left or not
lang	string	en-US	Setting for language, useful for non-English fonts

Number types

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'

Props

name	type	default value	description
url	string		URL to open
slide	number		Slide to open
tooltip	string		Tooltip on hover
rtlMode	boolean	false	Whether text is displayed in right-to-left or not
lang	string	en-US	Setting for language, useful for non-English fonts

<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.

Props

name	type	default value	description
src	{kind: "path", path: ""} | {kind: "data", data: ""}		Image URL
style.x	number (inches) or string (percentage)		Absolute x coordinate
style.y	number (inches) or string (percentage)		Absolute y coordinate
style.w	number (inches) or string (percentage)		Absolute width
style.h	number (inches) or string (percentage)		Absolute height

<Shape>

Shape layer.

Props

name	type	default value	description
type	shape types		Shape type
style.x	number (inches) or string (percentage)		Absolute x coordinate
style.y	number (inches) or string (percentage)		Absolute y coordinate
style.w	number (inches) or string (percentage)		Absolute width
style.h	number (inches) or string (percentage)		Absolute height
style.backgroundColor	complex color		Shape background color

Shape types

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
• arc
• bentArrow
• bentUpArrow
• bevel
• blockArc
• borderCallout1
• borderCallout2
• borderCallout3
• bracePair
• bracketPair
• callout1
• callout2
• callout3
• can
• chartPlus
• chartStar
• chartX
• chevron
• chord
• circularArrow
• cloud
• cloudCallout
• corner
• cornerTabs
• cube
• curvedDownArrow
• curvedLeftArrow
• curvedRightArrow
• curvedUpArrow
• decagon
• diagStripe
• diamond
• dodecagon
• donut
• doubleWave
• downArrow
• downArrowCallout
• ellipse
• 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
• frame
• funnel
• gear6
• gear9
• halfFrame
• heart
• heptagon
• hexagon
• homePlate
• horizontalScroll
• irregularSeal1
• irregularSeal2
• leftArrow
• leftArrowCallout
• leftBrace
• leftBracket
• leftCircularArrow
• leftRightArrow
• leftRightArrowCallout
• leftRightCircularArrow
• leftRightRibbon
• leftRightUpArrow
• leftUpArrow
• lightningBolt
• line
• lineInv
• mathDivide
• mathEqual
• mathMinus
• mathMultiply
• mathNotEqual
• mathPlus
• moon
• nonIsoscelesTrapezoid
• noSmoking
• notchedRightArrow
• octagon
• parallelogram
• pentagon
• pie
• pieWedge
• plaque
• plaqueTabs
• plus
• quadArrow
• quadArrowCallout
• rect
• ribbon
• ribbon2
• rightArrow
• rightArrowCallout
• rightBrace
• rightBracket
• round1Rect
• round2DiagRect
• round2SameRect
• roundRect
• rtTriangle
• smileyFace
• snip1Rect
• snip2DiagRect
• snip2SameRect
• snipRoundRect
• squareTabs
• star10
• star12
• star16
• star24
• star32
• star4
• star5
• star6
• star7
• star8
• stripedRightArrow
• sun
• swooshArrow
• teardrop
• trapezoid
• triangle
• upArrow
• upArrowCallout
• upDownArrow
• upDownArrowCallout
• uturnArrow
• verticalScroll
• wave
• wedgeEllipseCallout
• wedgeRectCallout
• wedgeRoundRectCallout

Complex colors

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.

Props

name	type	default value	description
x1	number (inches) or string (percentage)		Line start x coordinate
y1	number (inches) or string (percentage)		Line start y coordinate
x2	number (inches) or string (percentage)		Line end x coordinate
y2	number (inches) or string (percentage)		Line end y coordinate
style.color	hex color		Line color
style.width	number (inches) or string (percentage)		Line width

Credits / Shoutouts

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