Branded Slide Deck

React Component for presentation slide decks with preset styles

Usage

$ npm insall --save branded-slide-deck

import React from 'react'
import {render} from 'react-dom'
import BrandedSlideDeck from './components/BrandedSlideDeck'


render(<BrandedSlideDeck 
	slides={slides} 
	companyName={'Company Inc'} 
	showSidebar={true}
	canResize={false} />, document.getElementById('app'))

to check out demo

$ git clone [this repo]
$ cd [to cloned directory]
$ cd demo
$ http-server

API

Props

| name | type | default | description | | --- | --- | --- | --- | | companyName | String | undefined | Adds string to copyright text. | | showSidebar | Boolean | false | When true, sidebar will be shown on first first render. | | canResize | Boolean | true | When true, branded-slide-deck will attach a 'resize' event listner to the window to dynamically recalculate dimensions. Could cause some performance issues as it uses expensive DOM querying | | slides | [Object] | [{'Hello World'}] | Please read below. |

slides

cover

{
	cover: {
		title: 'Amazing Cover Slide',
		subtitle: 'Best Ever',
		logo: 'img/logo.png',
		backgroundColor: '#E9E'
		backgroundImage: undefined
	}
}

• title: String
• subtitle: String
• logo: String. Path. Renders logo as <img src={logo}/> if present, nothing if undefined
• backgroundColor: String. CSS value. Will be used if backgroundImage is undefined
• backgroundImage: String. url(path/to/img).

other slides

{
	title: 'Title',
	background: {
		type: 'light',
		backgroundColor: '#FFFFFF',
		backgroundImage: undefined,
	},
	columns: [{
		size: 8,
		elems: [{
			tag: 'span',
			type: 'text',
			content: "Bacon ipsum dolor amet frankfurter swine pork loin spare ribs short loin sirloin salami flank. Salami rump pork belly, swine bresaola prosciutto pork chop tenderloin jerky shank landjaeger chuck biltong turkey. Hamburger pork belly jowl tail, short ribs ball tip shank porchetta swine salami pastrami doner kevin."
		}]
	}, {
		size: 4,
		elems: [{
			tag: 'img',
			type: 'imageFull',
			content: "img/map.png"
		}]			
	}]
}

• title: String.
• background.type: String. 'light' or 'dark'. Will set font-color to white if dark and to accent color if light.
• columns: [Object]. Each object inside the array is used to render columns as main content of slides.
• columns[].size: Integer. Size of column in 12 column grid.
• columns[].elems: [Object]. Each object inside the array is used to render rows inside the columns.
• columns[].elems[].tag: String. 'span' for text content and 'img' for images.
• columns[].elems[].type: String. ['supabig','kindabig','kindasmall','text','quote','author','imageFull','imageOriginal']
  • supabig: Super big headings.
  • kindabig: Big headings.
  • kindasmall: Smaller headings.
  • text: Paragraphs.
  • quote: Paragraphs styled as blockquotes.
  • author: Author underneath quote.
  • imageFull: Image with width set to its parent width.
  • imageOriginal: Image with width set to its file width.