react-powerpoint v2.0.0

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

<Presentation>

Wraps the whole presentation.

Props

<Slide>

Represents each slide in the presentation.

Props

<Text>

Text layer

Props

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'

Props

<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

<Shape>

Shape layer.

Props

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

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

Credits / Shoutouts

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