react-pptx


React wrapper for 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(


x: 3, y: 1, w: 3, h: 0.5,
fontSize: 32
}}>
Hello there!

type="rect"
style={{
x: 3, y: 1.55, w: 3, h: 0.1,
backgroundColor: "#FF0000"
}}
/>


src={{
kind: "path",
path: "http://www.fillmurray.com/460/300"
}}
style={{
x: "10%", y: "10%", w: "80%", h: "80%"
}}
/>


).then(buffer => {
fs.writeFile("presentation.pptx", buffer);
});
`

Api

$3

Asynchronously renders given presentation JSX.

$3

Wraps the whole presentation.

#### Props

| name | type | default value | description |
| -- | -- | -- | -- |
| layout | "16x9", "16x10", "4x3", or "wide" | "16x9" | Slide size |

$3

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 |

$3

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.

$3

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

$3

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 |

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

$3

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 |

$3

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 |

$3

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 by Brent Ely
- react-pdf for REPL code
- react-keyed-flatten-children