Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/wyozi/react-pptx

Create PowerPoint presentations with React
https://github.com/wyozi/react-pptx
hacktoberfest
Last synced: about 1 month ago
JSON representation
Create PowerPoint presentations with React
Host: GitHub
URL: https://github.com/wyozi/react-pptx
Owner: wyozi
License: mit
Created: 2019-11-18T18:55:54.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2024-09-26T17:17:41.000Z (3 months ago)
Last Synced: 2024-10-01T15:39:28.251Z (2 months ago)
Topics: hacktoberfest
Language: TypeScript
Homepage: https://wyozi.github.io/react-pptx/
Size: 4 MB
Stars: 121
Watchers: 6
Forks: 28
Open Issues: 12
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

awesome-ccamel - wyozi/react-pptx - Create PowerPoint presentations with React (TypeScript)
README

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

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



```jsx

import {

  Presentation, Slide, Text,

  Shape, Image, render

} from "react-pptx";

import fs from "fs";

render(

  

    

      

        Hello there!

      

      

    

    

      

    

  

).then(buffer => {

  fs.writeFile("presentation.pptx", buffer);

});

```

## Api

### `ReactPPTX.render(): Promise`

Asynchronously renders given presentation JSX.

### ``

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

### ``

Wraps the whole presentation.

#### Props

| name | type | default value | description |

| -- | -- | -- | -- |

| `layout` | "16x9", "16x10", "4x3", or "wide" | "16x9" | [Slide size](https://gitbrent.github.io/PptxGenJS/docs/usage-pres-options.html#slide-layouts-sizes) |

### ``

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 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](https://www.cssfontstack.com/) |

| `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](https://gitbrent.github.io/PptxGenJS/docs/api-text#text-formatting).

### ``

Link to somewhere. Only usable inside ``. You must specify either `url` or `slide`.

### ``

Bullet or numbered list item. Only usable inside ``.

| 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 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 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 layer. Internally uses `` 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](https://github.com/gitbrent/PptxGenJS) by Brent Ely 

- [react-pdf](https://react-pdf.org/) for REPL code

- [react-keyed-flatten-children](https://github.com/grrowl/react-keyed-flatten-children)