Preview

Description

The Preview component is a React component that renders a action element to open a story. It uses hooks to access the preview and viewer contexts and conditionally applies CSS classes and attributes based on these context values. The component is forward-ref compatible, allowing it to be used with refs.

Properties

Component

Below are the properties and events available for the Preview component:

Property	Type	Description
`as`	`React.ElementType`	Specifies the component type to render (by default, `"button"`).
`children`	`React.ReactNode`	The content to be rendered inside the button.
`className`	`string`	Additional CSS class names to apply.
`...events`	`PreviewEvents`	Optional callback events for component.
`...props`	`React.HTMLAttributes`	Standard HTML Element attributes.

Events

Property	Type	Description
`onClick`	`Function`	Function to be called when the `Preview` is clicked. If the function returns a `truthy` value, then the function will prevent the viewer component from opening.
`onShow`	`Function`	Function to be called when the `Preview` is shown.
`onHide`	`Function`	Function to be called when the `Preview` is hidden.

States

When a story is opened in the viewer, the following className is applied to the Preview component to indicate its expanded state:

Expanded (classname: .instastories-preview--expanded)
- Component sets aria-expanded to true, by default.
- This class is applied to the Preview component when the current story is opened in the viewer.
- Use this class to define styles or animations that reflect the expanded state of the preview, indicating that the story is currently active and being viewed.
- This state helps in visually distinguishing the active story from other previews.

Contexts Available

Usage

<Preview
  onClick={() => console.debug("Preview clicked!")}
  onShow={() => console.debug("Preview is shown!")}
  onHide={() => console.debug("Preview is hidden!")}
>
  <h1>Preview Content</h1>
</Preview>

ARIA

If you want support common ARIA-behaviour (opens in a new tab) for role="toolbar" as Preview components, you can use third-party library @react-aria/toolbar or create custom own solution.

import { useToolbar } from "@react-aria/toolbar";
import React from "react";
 
export function AppStories() {
  const ref = React.useRef(null);
  const { toolbarProps } = useToolbar({ "aria-label": "Stories" }, ref);
 
  return (
    <InstaStories>
      <Stories {...toolbarProps} ref={ref}>
        <Story>
          <Preview>Preview Content #1</Preview>
          {...pages}
        </Story>
        <Story>
          <Preview>Preview Content #2</Preview>
          {...pages}
        </Story>
        <Story>
          <Preview>Preview Content #3</Preview>
          {...pages}
        </Story>
      </Stories>
    </InstaStories>
  );
}

Demo

Story Pages