rp

react-pptx

[![npm](https://img.shields.io/npm/v/react-pptx?label=%22react-pptx%22%20%40%20npm)](https://www.npmjs.com/package/react-pptx)

Showing:

Popularity

Downloads/wk

103

Maintenance

No Maintenance Data Available

Package

Dependencies

5

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

react-pptx

npm

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: "http://www.fillmurray.com/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.

<Presentation>

Wraps the whole presentation.

Props

nametypedefault valuedescription
layout"16x9", "16x10", "4x3", or "wide""16x9"Slide size

<Slide>

Represents each slide in the presentation.

Props

nametypedefault valuedescription
hiddenbooleanfalseWhether this slide is hidden during presenting
style.backgroundColorcolorSlide background color
style.backgroundImage{kind: "path", path: ""} \| {kind: "data", data: ""}Background image url

<Text>

Text layer

Props

nametype default valuedescription
style.xnumber (inches) or string (percentage)Absolute x coordinate
style.ynumber (inches) or string (percentage)Absolute y coordinate
style.wnumber (inches) or string (percentage)Absolute width
style.hnumber (inches) or string (percentage)Absolute height
style.colorcolorText color
style.fontFacestringArialFont family. Try to stick to web-safe fonts
style.fontSizenumber (points)18Font size. Defined in points (96 dpi by default)
style.boldbooleanfalseWhether text is bold or not
style.italicbooleanfalseWhether text is italic or not
style.underlinebooleanfalseWhether text is underlined or not
style.subscriptbooleanfalseWhether text is subscript or not
style.superscriptbooleanfalseWhether text is superscript or not
style.strikebooleanfalseWhether text has a strikeout or not
style.insetbooleanfalseWhether text is inset or not
style.align"left" or "center" or "right"undefinedHorizontal text alignment within the text box
style.verticalAlign"top" or "middle" or "bottom"undefinedVertical text alignment within the text box
style.paraSpaceAfternumber (points)Paragraph spacing after the text
style.paraSpaceBeforenumber (points)Paragraph spacing before the text
style.charSpacingnumber (points)The amount of spacing between characters, between 1-256
style.lineSpacingnumber (points)Space between each line
style.marginnumber (points) or [number, number, number, number]Similar to CSS padding, 0-99
style.rotateintegerDegrees of text rotation, between 0-360
rtlModebooleanfalseWhether text is displayed in right-to-left or not
langstringen-USSetting for language, useful for non-English fonts

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

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

nametype default valuedescription
type"bullet" or "number""bullet"Whether to use a bulleted list or numbered list
characterCodestringundefinedBullet character code (unicode)
indentnumber27Indentation (space between bullet and text) (points)
numberTypestringundefinedThe numbering type to use (Number type, see below)
numberStartAtnumberundefinedNumber bullets start at
rtlModebooleanfalseWhether text is displayed in right-to-left or not
langstringen-USSetting 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

nametype default valuedescription
urlstringURL to open
slidenumberSlide to open
tooltipstringTooltip on hover
rtlModebooleanfalseWhether text is displayed in right-to-left or not
langstringen-USSetting 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

nametypedefault valuedescription
src{kind: "path", path: ""} \| {kind: "data", data: ""}Image URL
style.xnumber (inches) or string (percentage)Absolute x coordinate
style.ynumber (inches) or string (percentage)Absolute y coordinate
style.wnumber (inches) or string (percentage)Absolute width
style.hnumber (inches) or string (percentage)Absolute height

<Shape>

Shape layer.

Props

nametypedefault valuedescription
typeshape typesShape type
style.xnumber (inches) or string (percentage)Absolute x coordinate
style.ynumber (inches) or string (percentage)Absolute y coordinate
style.wnumber (inches) or string (percentage)Absolute width
style.hnumber (inches) or string (percentage)Absolute height
style.backgroundColorcomplex colorShape 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

nametypedefault valuedescription
x1number (inches) or string (percentage)Line start x coordinate
y1number (inches) or string (percentage)Line start y coordinate
x2number (inches) or string (percentage)Line end x coordinate
y2number (inches) or string (percentage)Line end y coordinate
style.colorhex colorLine color
style.widthnumber (inches) or string (percentage)Line width

Credits / Shoutouts

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial