Introducing Spectacle's Enhanced Architecture

As we enter the new year we at Formidable have made some refinements and fixes to Spectacle. This new version builds upon the rewrite of Spectacle last year and the great response we’ve received from the community.

Improved Markdown Slide Support

We have introduced three new components to improve our Markdown support in Spectacle. The <Markdown /> component allows for content within a slide to be translated to Spectacle components such as a heading or list. There are two components available to create slides without a slide component: <MarkdownSlide /> and <MarkdownSlides />. This is a change in API from the prior version and an example usage is shown below:

<MarkdownSlide>
  # Heading for Slide
  This is a single slide composed using Markdown.
</MarkdownSlide>
<MarkdownSlideSet>
  # Markdown Slide Sets
  Let you write a sequence of slides using Markdown.
  ---
  # This is the Second Slide in the Set
  Using the `---` delimiter creates a new slide in the set.
  Notes: Anything here will be limited to the presenter display
</MarkdownSlideSet>
jsx

Improvements to Code Pane

One of the biggest uses of Spectacle is presenting code to audiences. We built in the ability to highlight ranges of lines of code within your pane. The highlightRanges prop accepts an array of lines or a sequence of lines. Each highlight will appear on slide navigation when the right arrow key is pressed.

How to use it

<CodePane highlightRanges={[1, 3]} ... /> will create a single highlight from lines 1 to 3.
<CodePane highlightRanges={[1, [6, 8]]} ... /> will create two highlights that range between the listed line numbers. As you can see below the first range is the single line of code at line 1 and the second range is the group of lines between 6 and 8.

Spectacle screenshot 1

Spectacle screenshot 2

Presenting Transient Behavior With `useSteps`

When components have complex prop-driven behavior, it can sometimes be difficult to show how they behave as their props change. Spectacle 7 provides the useSteps hook to help drive components with interactivity.

For example, suppose you wanted to show how this animated component works:

const Rotator = ({
  angle,
  children,
}) => {

  const springStyle = useSpring({
    transform: `rotate(${angle}deg)`
  });

  return (
    <animated.div style={springStyle}>
      {children}
    </animated.div>
  );
};
jsx

With useSteps, you can create "driver" components which are integrated with your presentation, and use them as easily as you'd use an <Appear />. The implementation of <Appear /> uses this hook itself, under the hood.

const PROPS_FOR_DEMO = [
	{ angle: 30 },
  { angle: 60 },
  { angle: 90 },
];

const RotatorDemo = () => {
  const { isActive, step, placeholder } = useSteps(ANGLES_FOR_DEMO.length);

  const rotatorProps = PROPS_FOR_DEMO[step] ?? { angle: 0 };

  return (
    <>
      {isActive ?? (
        <Rotator {...rotatorProps}>
          <p>`Rotated ${rotatorProps.angle}°`</p>
        </Rotator>
      {placeholder}
    </>
  );
};

const RotatorDemoSlide = () => (
  <Slide>
    <Appear>This text will appear at step 1...</Appear>
    <RotatorDemo />
		<Appear>...and this text will appear after the Rotator is finished!</Appear>
  <Slide>
);
jsx

Spectacle brings several under-the-hood improvements that improve the overall experience with a couple API changes based on community feedback. The Spectacle CLI is a great way to generate a new deck and quickly try out all the latest features. Within Formidable we want to extend a special thanks to my colleagues Christian Ipanaque and Urmit Patel for their hard work in making this release possible. 👏