1. Advisor
  2. spectacle
  3. spectacle code examples
View all spectacle analysis

How to use spectacle - 10 common examples

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 ericvicenti / swag-store / slides / presentation / index.js View on Github external
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"),
github massimiliano-mantione / talks / ApiConf2018 / presentation / index.js View on Github external
// 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) =&gt; {
  return {children}
}
const slide = (children) =&gt; {
  return {children}
}
github realworldreact / react-workshop / slides / level-up / presentation / index.jsx View on Github external
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 (
github raymondsze / how-to-avoid-callback-hell / presentation / index.js View on Github external
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 (
      
        
          
            
              Async / Await
            
            
              How to avoid callback hell?

spectacle

ReactJS Powered Presentation Framework

GitHub
MIT
Latest version published 1 month ago

Package Health Score

81 / 100
Full package analysis

Popular spectacle functions

Similar packages