question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Document how to make components that render Slides

See original GitHub issue

I’m trying to make a react component that produces a spectacle Slide. I’ve run into a couple of problems that resulted in cryptic error messages (at least to me as a react novice) or mysterious misbehavior. Specifically, function-based components don’t seem to work, and all props must be passed through to the slide even if no such props are visible in your presentation.js file.

The simplest possible custom slide component (as far as I’ve been able to determine) is therefore

class MySlide extends React.Component {
  render() {
    return <Slide {...this.props}>...</Slide>
  }
}

It would be great if there were some documentation about this.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:11 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
benwiley4000commented, Aug 13, 2018

The comments in the first post helped me solve my problem. Animations started kicking in once I started spreading all my unused props to the child Slide component in my custom components.

class MyCustomSlide extends Component {
  render() {
    const { someprop, ...rest } = this.props;
    return (
      <Slide {...rest}>
        {/*...*/}
      </Slide>
    ); 
  }
}
1reaction
loraxx753commented, Jul 28, 2018

Not sure if it helps or is even related, but I’ve been building up my custom slides like these:

import React from 'react'
import { Deck, Slide, Text } from 'spectacle'

const FirstSlide = props => {
  return (
    <Slide>
      <Text>Hello there {props.key}.</Text>
      <Text>Ready?</Text>
    </Slide>
  )
}
const SecondSlide = props => {
  return (
    <Slide {...props}>
      <Text>Hello there {props.key}.</Text>
      <Text>Steady...</Text>
    </Slide>
  )
}

export const slides = [
  FirstSlide,
  SecondSlide,
  props => {
    return (
      <Slide>
        <Text>Hello there {props.key}.</Text>
        <Text>Let's rock.</Text>
      </Slide>
    )
  }
]

export default props => (
  <Deck>
    {slides.map((Slide, i) => Slide({ key: i }))}
  </Deck>
)
Read more comments on GitHub >

github_iconTop Results From Across the Web

Pages, Page Elements, and Properties | Google Slides
Different page elements support different properties that control how the page element is rendered. Each page element kind has a corresponding properties ...
Read more >
How to Build an Auto-Playing Slideshow with React - Tinloof
The trick. Our Slideshow component is divided in three containers: slideshow; slideshowSlider; slide. Here's a sketch to visualize the structure ...
Read more >
How To Create Wrapper Components in React with Props
To create wrapper components, you'll first learn to use the rest and spread operators to collect unused props to pass down to nested...
Read more >
Create your first component - Microsoft Learn
mkdir LinearInput. Open your LinearInput folder inside Visual Studio Code. The quickest way to start is by using cd LinearInput and then ...
Read more >
Introduction to React JS Presentation - LinkedIn
Build Virtual DOM from components; Compile Virtual DOM to the string of markup ... Create component and render it to #myapp element.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found