How to use spectacle - 10 common examples

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");


const images = {
  city: require("../assets/city.jpg"),
  kat: require("../assets/kat.png"),
  logo: require("../assets/formidable-logo.svg"),
  markdown: require("../assets/markdown.png"),
  frankenstein: require("../assets/frankenstein-its-native.jpg"),
  lottie: require("../assets/lottie.gif")
};

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "#1F2022",
  tertiary: "#03A9FC",
  quartenary: "#CECECE"
}, {
  primary: "Montserrat",
  secondary: "Helvetica"
});

export default () => (
  <Deck transition={["slide"]} transitionDuration={500} theme={theme} progress="bar">
    <Slide bgColor="primary">
      <Heading size={1} fit caps lineHeight={1} textColor="secondary">
        React Native

import React from "react";
import { Heading, Slide, List, Appear, Image } from "spectacle";
// Import mapValues from lodash
import mapValues from "lodash/mapValues";
// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

const images = mapValues({
  appDispatcher: require("../../assets/appDispatcher.png")
}, v => v.replace('/', ''));

preloader(images);

export default (
  <Slide transition={"zoom"} bgColor="fifth">
    <Heading size={3} textColor="primary">
      AppDispatcher
    </Heading>
    <List>
      <Appear><Image src={images.appDispatcher}/></Appear>
    </List>
  </Slide>
);

import { LikeButton as LikeButtonJSON } from '../../09-react-style-object/src/LikeButton'

// Require CSS
require('normalize.css')
require('spectacle/lib/themes/default/index.css')


const images = {
  planet: require('../assets/images/planet.jpg'),
  gbu: require('../assets/images/gbu.gif'),
  good: require('../assets/images/good.jpg'),
  bad: require('../assets/images/bad.jpg'),
  pollution: require('../assets/images/pollution.jpg')
}

preloader(images)

const theme = createTheme({
  primary: '#20c063',
  secondary: '#ffffff',
  tertiary: '',
  quartenary: ''
}, {
  primary: 'Open Sans Condensed',
  secondary: 'Lobster Two',
  tertiary: 'monospace'
})

export default class Presentation extends React.Component {
  render () {
    return (
      <Spectacle theme={theme}>

android: require("../assets/phone_a.png"),
  c0a: require("../assets/c0a.mov"),
  c0i: require("../assets/c0i.mov"),
  c1a: require("../assets/c1a.mov"),
  c1i: require("../assets/c1i.mov"),
  c2a: require("../assets/c2a.mov"),
  c2i: require("../assets/c2i.mov"),
  c3a: require("../assets/c3a.mov"),
  c3i: require("../assets/c3i.mov"),
  c4a: require("../assets/c4a.mov"),
  c4i: require("../assets/c4i.mov"),
  c5a: require("../assets/c5a.mov"),
  c5i: require("../assets/c5i.mov")
};

preloader(images);

const theme = createTheme(
  {
    primary: "white",
    // secondary: "#1F2022",
    secondary: "#4A8E58",
    tertiary: "black",
    quartenary: "#CECECE",
    blue: "#3b5998"
  },
  {
    primary: "Montserrat",
    secondary: "Helvetica"
  }
);

import { theme, colors, size } from './theme';
import * as Layout from './layout';

// Prism plugins
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-graphql';

// Server & client code samples
import * as client from './code/client';
import * as server from './code/server';

// Preload images
import preloader from 'spectacle/lib/utils/preloader';
import images from './images';

preloader(images);

// Require CSS
require('normalize.css');

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck
        transition={['fade']}
        transitionDuration={500}
        contentWidth={1500}
        contentHeight={800}
        controls={false}
        progress="none"
        theme={theme}
      >

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  lerna: require("../assets/lerna.png"),
  yarn: require("../assets/yarn.svg"),
  title: require("../assets/title.jpg"),
  step1: require("../assets/step1.png"),
  step2: require("../assets/step2.png"),
  step3: require("../assets/step3.png"),
  modular: require("../assets/modular_things.jpg")
};

preloader(images);

const theme = createTheme({
  primary: "#4f4f4f",
  secondary: "#fff",
  tertiary: "#03A9FC",
  quartenary: "#CECECE"
}, {
  primary: "Montserrat",
  secondary: "Montserrat"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={["slide"]} progress="number" transitionDuration={500} theme={theme}>
        <Slide bgColor="primary">

c0i: require("../assets/c0i.mov"),
  c1a: require("../assets/c1a.mov"),
  c1i: require("../assets/c1i.mov"),
  c2a: require("../assets/c2a.mov"),
  c2i: require("../assets/c2i.mov"),
  c3a: require("../assets/c3a.mov"),
  c3i: require("../assets/c3i.mov"),
  c4a: require("../assets/c4a.mov"),
  c4i: require("../assets/c4i.mov"),
  c5a: require("../assets/c5a.mov"),
  c5i: require("../assets/c5i.mov")
};

preloader(images);

const theme = createTheme(
  {
    primary: "white",
    // secondary: "#1F2022",
    secondary: "#4A8E58",
    tertiary: "black",
    quartenary: "#CECECE",
    blue: "#3b5998"
  },
  {
    primary: "Montserrat",
    secondary: "Helvetica"
  }
);

const CodeData = {
  webflow: require("raw-loader!../assets/webflow.js.code"),

// Import theme
import createTheme from 'spectacle/lib/themes/default'

// Require CSS
require('normalize.css')
require('spectacle/lib/themes/default/index.css')

const images = {
  logo: require('../assets/apiconf-logo.png'),
  wlogo: require('../assets/apiconf-logo-white.png')
}

preloader(images)

const theme = createTheme({
  primary: 'white',
  secondary: '#1F2022',
  tertiary: '#03A9FC',
  quartenary: '#4E4E4E'
}, {
  primary: 'Montserrat',
  secondary: 'Helvetica'
})

const slideZoom = (children) => {
  return <Slide transition={['zoom', 'slide']} bgColor="secondary" textColor="primary">{children}</Slide>
}
const slide = (children) => {
  return <Slide transition={['fade']} bgColor="secondary" textColor="primary">{children}</Slide>
}

ListItem,
  CodePane,
  Text,
  Link
} from 'spectacle';
import createTheme from 'spectacle/lib/themes/default';
import CodeSlide from 'spectacle-code-slide';
import UncontrolledForm from './Uncontrolled-Form.jsx';

// Require CSS
require('normalize.css');
require('spectacle/lib/themes/default/index.css');

const reactBlue = '#00d8ff';

const theme = createTheme({
  primary: '#222',
  secondary: reactBlue,
  tertiary: 'white',
  quartenary: reactBlue
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={ theme }>
        <Deck
          transition={[ 'zoom', 'slide' ]}
          transitionDuration={ 500 }
          >
          <Slide transition={[ 'zoom' ]}>
            <Heading

ListItem,
  List,
  Quote,
  Slide,
  Spectacle,
  Text
} from "spectacle";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const theme = createTheme({
  primary: "#ff4081"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={["zoom", "slide"]} transitionDuration={500}>
          <Slide transition={["zoom"]} bgColor="orange">
            <Heading size={1} fit caps lineHeight={1} textColor="black">
              Async / Await
            </Heading>
            <Heading size={1} fit caps>
              How to avoid callback hell?
            </Heading>
            <Link href="https://github.com/raymondsze/how-to-avoid-callback-hell">