How to use the spectacle/lib/utils/preloader function in spectacle

To help you get started, we’ve selected a few spectacle examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github frostney / talks / files / react-native-may2017 / presentation / index.js View on Github external
// 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 () => (
  
    
      
        React Native
github react-skg / meetup / src / presentations / reactDay / stateManagement / slides / 5 / index.js View on Github external
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 (
  
    
      AppDispatcher
    
    
      <img src="{images.appDispatcher}/">
    
  
);
github joeshub / css-in-react / talk / presentation / index.js View on Github external
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 (
github ericvicenti / swag-store / slides / presentation / index.js View on Github external
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"
  }
);
github peggyrayzis / guide-to-graphql / src / presentation.js View on Github external
import { theme, colors, size } from './theme';
import * as Layout from './layout';

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

// Server &amp; 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 (
github frostney / talks / files / monorepo-reactiveconf / presentation / index.js View on Github external
// 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 (
github peggyrayzis / reactnext-universal-components / presentation / index.js View on Github external
platformPrimitives: require('../assets/platform-primitives.png'),
  nativeModules: require('../assets/native-modules.png'),
  storybook: require('../assets/storybook-screenshot.png'),
  webToNative: require('../assets/web-to-native.png'),
  waitWhat: require('../assets/wait-what.jpg'),
  apple: require('../assets/apple-1998.png'),
  tweet1: require('../assets/tweet1.png'),
  tweet2: require('../assets/tweet2.png'),
  tweet3: require('../assets/tweet3.png'),
  sketch: require('../assets/sketch.png'),
  safari: require('../assets/safari.png'),
  svgs: require('../assets/svgs.png'),
  storyshots: require('../assets/storyshots.png'),
};

preloader(images);

const colors = {
  primary: '#191c20',
  secondary: '#F3F4F4',
  tertiary: '#96DBE4',
  quartenary: '#93DAAB',
  dark: '#010207',
};

const theme = createTheme(colors, {
  primary: { name: 'Poppins', googleFont: true, styles: ['400', '600'] },
  secondary: 'Helvetica',
});

const fontSize = {
  large: '3.2em',
github frostney / talks / files / react-game-aug2017 / presentation / index.js View on Github external
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  kenConvince: require("assets/ken_convince.png"),
  water: require("assets/water.png"),
  ship: require("assets/ship.png"),
  shipRotate: require("assets/ship_rotate.png"),
  pirateship: require("assets/ship_pirate.png"),
  shipPirateAnimation: require("assets/ship_pirate_small_cannon.png"),
  cannonball: require("assets/cannonball.png")
};

const imports = { React, Key, ...components };

preloader(images);

const theme = createTheme({
  primary: "#4f4f4f",
  secondary: "#fff"
});

export default class Presentation extends React.Component {
  render() {
    return (
      
        
          
            
              Let's create a React powered game in 25 minutes
            
            <img src="{images.pirateship}">
github callstack / talk-universal-react / images.js View on Github external
import preloader from 'spectacle/lib/utils/preloader';

const images = {
  logo: require('assets/img/logo.svg'),
  background: require('assets/img/bg.jpg'),
  chudziak: require('assets/img/chudziak.jpg'),
  dratwa: require('assets/img/dratwa.jpg'),
  facebookWeb: require('assets/img/facebookWeb.png'),
  facebookAndroid: require('assets/img/facebookAndroid.png'),
  facebookIos: require('assets/img/facebookIos.png'),
  flux: require('assets/img/flux.png'),
};

preloader(images);

export default images;

spectacle

ReactJS Powered Presentation Framework

MIT
Latest version published 9 months ago

Package Health Score

73 / 100
Full package analysis