InstaStories
The InstaStories component is the main component for rendering the library.
Properties
Component
| Property | Type | Description |
|---|---|---|
config | Configuration | Optional configuration of the library component. |
children | React.ReactNode | Children elements to be rendered inside the library component (Configurable, Stories, Pages). |
...events | ViewerEvents | Optional callback events for component. |
Events
| Event | Type | Description |
|---|---|---|
onOpen | Function | Function to be called when the viewer opens/mounts. |
onShow | Function | Function to be called when the viewer starts to show. |
onHide | Function | Function to be called when the viewer starts to hide. |
onClose | Function | Function to be called when the viewer closes/unmounts. |
Configuration
You can access to this object into inner components through hook useConfig.
| Property | Type | Description |
|---|---|---|
animation | Animation | The animation type for opening state of viewer. |
duration | number | The duration of each story in milliseconds by default. |
preview | object | The configuration for the preview component. |
preview.mounted | boolean | Mounts the preview on mounting main component. |
timer | object | |
timer.shouldUseDefault | boolean | Enables/disables default in-built timer. When false - use supported third-party timer context to navigate between stories and pages. |
timer.interval | number | |
viewer | object | The configuration for the viewer component. |
viewer.mounted | boolean | Mounts immediately active viewer on mounting the main component. |
viewer.props | React.DialogHTMLAttributes | Props for the active viewer component. |
viewer.story | number | The index of the story was been opened only on mounted = true. |
Global
| Property | Type | Description |
|---|---|---|
debug | boolean | Enables debug mode. |
Contexts Available
Usage
import {
InstaStories,
Page,
Pages,
Preview,
Stories,
Story
} from "@react-instastories/base";
import "@react-instastories/base/index.css";
export function AppStories() {
return (
<InstaStories>
<Stories>
<Story>
<Preview>Preview Content</Preview>
<Pages>
<Page>Page Content</Page>
</Pages>
</Story>
</Stories>
</InstaStories>
);
}Demo
Default
Should Mount Configuration
Debug mode
The debug mod will be used for all InstaStories, regardless of where debug: true was declared.
import { config } from "@react-instastories/base";
config.debug = true;