Provide a way to add custom stepper components

[vlsi]

Description

It looks like Spectacle supports two steppers only: Appear and Stepper. There are cases when none of the above is a good fit. For instance: integrating https://github.com/pomber/code-surfer, or drawing a plot where step elements result in adding more data or adding lines to the plot.

Proposal

What if there was a way to declare a number of steps explicitly or with a hook?

For instance:

// This configures the slide to have 5 steps, and the current step could be requested as usual context
<Slide steps=5 ...>

Alternative option: provide a hook that would enable a component to declare the number of underlying steps. For instance, in the cases like code-surfer, the number of steps is defined by the markup, and it would be error-prone (and inconvenient) to specify the number of steps twice (in code-surfer markup and in <Slide steps=...>.

Links / References

https://github.com/jxnblk/mdx-deck/blob/0cca3a082414ca4b186ae1e7ecbda8ab00ab11bf/docs/api.md#usesteps

[Zenahr]

@vlsi seconded. I would love to see a feature where I could make a text appear on a slide like so:

´´´ This This is This is so This is so amazing! ´´´

maybe this could be accomplished like so (2 example use cases):

<IncrementalStepperWrapper>
    <Text>This</Text>
    <Text>This is</Text>
    <Text>This is so</Text>
    <Text>This is so amazing!</Text>
</IncrementalStepperWrapper>

<IncrementalStepperWrapper>
    <Text>This is really</Text>
    <Text>This is really bad</Text>
</IncrementalStepperWrapper>

As in example 2 (with 'this is really bad') this would render like so on a slide:

This is really

---presses right arrow key---

This is really bad

---

So basically every element inside the wrapper would be replaced by its next neighbour.

[sneakers-the-rat]

described how to do this in related issue: https://github.com/FormidableLabs/spectacle/issues/1009