Neurophysiologically Pseudoscientific Manatee

    react-pptx
    TypeScript icon, indicating that this package has built-in type declarations

    2.13.0 • Public • Published

    react-pptx

    npm

    React wrapper for PptxGenJS. 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
    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)

    Credits / Shoutouts

    Install

    npm i react-pptx

    DownloadsWeekly Downloads

    85

    Version

    2.13.0

    License

    MIT

    Unpacked Size

    95.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • wyozi