npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@learnery/react-pptx

v2.25.0

Published

Render JSX to a .pptx file

Downloads

12

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

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

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 |

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

| 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