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