Prezo

Create nice looking presentations in seconds

Prezo leverages react-responsive-carousel capabilities to create presentations.

Installing as a package

npm install prezo --save

Prezo

Usage

import React, { Component } from 'react';
import { Prezo, Slide } from '../src/index';

class MyPresentation extends Component {
    render() {
        return (
            <Prezo>
                <Slide type="title">My awesome presentation</Slide>
                <Slide type="subtitle">Created in less than 1 minutes</Slide>
                <Slide>About how it's easy to build presentations</Slide>
            </Prezo>
        );
    }
}

ReactDOM.render(<MyPresentation />, document.querySelector('.my-presentation'));

Props

| Attributes | Type | Default | Description | | :--------- | :--: | :-----: | ----------- | | showArrows | boolean | true | show prev and next arrows | | showPositionXofTotal | boolean | true | show index of the current slide. i.e: (1/8) | | showIndicators | boolean | true | show little dots at the bottom with links for changing the slide | | useDefaultStyles | boolean | true | loads the default styles | | className | string | `` | custom class name assigned to the presentation |

Slide

Usage

<Prezo>
    <!-- Title -->
    <Slide type="title">My awesome presentation</Slide>

    <!-- Primary -->
    <Slide type="primary">
        <h1>My awesome presentation</h1>
        <p>Brief text</p>
    </Slide>
    
    <!-- Sub title -->
    <Slide type="subtitle">Created in less than 1 minutes</Slide>
    
    <!-- Secondary type -->
    <Slide type="secondary">
        <h2>My awesome intro</h2>
        <p>Brief text</p>
    </Slide>
    
    <!-- Simple content -->
    <Slide>About how it's easy to build presentations</Slide>
    
    <!-- Multi columns -->
    <Slide multiColumns>
        <h2>Multi columns</h2>
        <img src="assets/meme.png" />
    </Slide>
    
    <!-- Video -->
    <Slide>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/n0F6hSpxaFc" />
    </Slide>
</Prezo>

| Attributes | Type | Default | Description | | :--------- | :--: | :-----: | ----------- | | type | string | content | accepts: primary, secondary, content, title, subtitle | | multiColumns | boolean | true | allows to create columns - each dom element will be one column | | customType | string | | add your own types, each custom type should contain a class matching it's name in your own css | | className | `string` | | custom class name assigned to the slide |

Extending the default Slides through custom styles

• Add a className to Slide
• Load your css

Creating my own set of Slides instead of using existent ones

• Copy the file Prezo.scss from /src folder, add your own rules there.
• Add useDefaultStyles={ false } when creating your Prezo

Contributing

Please, feel free to contribute. You may file an issue or submit a pull request!

Setting up development environment

• git clone [email protected]:leandrowd/prezo.git
• npm install
• npm run storybook
• Open your favourite browser on localhost:9001

TODO:

• Add support for a "code" slide (with auto code coloring)
• Add support to css animations inside slides