https://github.com/albertfdp/react-ppt
React renderer to PowerPoint with Flexbox support
https://github.com/albertfdp/react-ppt
powerpoint powerpoint-javascript-library react renderer
Last synced: about 2 months ago
JSON representation
React renderer to PowerPoint with Flexbox support
- Host: GitHub
- URL: https://github.com/albertfdp/react-ppt
- Owner: albertfdp
- Created: 2017-12-25T12:31:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-30T11:18:39.000Z (over 8 years ago)
- Last Synced: 2025-05-24T01:40:04.054Z (about 1 year ago)
- Topics: powerpoint, powerpoint-javascript-library, react, renderer
- Language: JavaScript
- Homepage:
- Size: 105 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# react-ppt
> Create PowerPoint presentations with React using CSS and Flexbox layout
## Introduction
`react-ppt` is a library that lets you create PowerPoint presentations with React. It provides a set of low-level components which render your declarative slides and components to PowerPoint. It implements Facebook's [Yoga](https://github.com/facebook/yoga) layout engine, thus you can style the slides using `flexbox` instead of the traditional pptx libraries absolute positioning. It aims to support as much as possible `CSS` properties.
`react-ppt` wraps [PptxGenJS](https://github.com/gitbrent/PptxGenJS) library, so you can refer to its documentation for the details on specific props.
## Example
```js
import React from 'react';
import { render, Deck, Slide, Text } from 'react-ppt';
const App = () => (
Hello World
);
render(, 'example.ppt');
```
## Install
```bash
$ npm install --save react react-pptx
```
## Usage
* Create a `.babelrc`
```json
{
"presets": ["env", "react"]
}
```
After configuring [babel](https://github.com/babel/babel) you can run the example in [Example](#example).
## Components
### Deck
```js
```
| Prop | Type | Default | Options |
| :--------- | :--------------- | :------ | :------------------------------------------------------------------------------- |
| `author` | string | | |
| `company` | string | | |
| `revision` | string | | |
| `subject` | string | | |
| `title` | string | | |
| `dir` | string | `ltr` | |
| `layout` | string or object | `16x9` | `16x9`, `16x10`, `4x3`, `wide`, `{ name: string, width: number, height: number}` |
[More info](https://github.com/gitbrent/PptxGenJS/blob/master/README.md#presentation-properties)
### Slide
```js
```
| Prop | Type | Default | Options |
| :------- | :----- | :------ | :--------------------- |
| `number` | object | | See below |
| `style` | object | {} | See StyleSheet section |
`number` props:
| Prop | Type | Default | Examples |
| :--------- | :--------------- | :------ | :--------------------------------- |
| `x` | string or number | | `10`, `10%` |
| `y` | string or number | | `10`, `10%` |
| `color` | string | | `#000000`, `black`, `rgb(0, 0, 0)` |
| `fontFace` | string | | `Comic Sans` |
| `fontSize` | number | | `10` |