Documentation
Presets
Create presets

How to create own style presets

Base Library Class Names

Viewer

  • instastories-viewer contains instastories-viewer-content

    • instastories-viewer--smart
    • instastories-viewer--linear
    • instastories-viewer--entering
    • instastories-viewer--entered
    • instastories-viewer--exiting
    • instastories-viewer--exited

  • instastories-viewer-content contains instastories-story

Stories

  • instastories-stories contains instastories-preview
  • instastories-story contains instastories-pages
    • instastories-story--disabled

Pages

  • instastories-pages contains instastories-page
  • instastories-page
    • instastories-page--disabled
    • instastories-page--priority

Preview

  • instastories-preview
    • instastories-preview--expanded

Usage

Presets From Scratch

path/to/file/example.css
[data-preset="instastories-preset-example"].instastories-viewer,
[data-preset="instastories-preset-example"].instastories-stories, {
  --is-preset-name: "example";
}
 
[data-preset="instastories-preset-example"].instastories-viewer--entering,
[data-preset="instastories-preset-example"].instastories-viewer--entered {
  background-color: #39f6;
}
 
/* ... any other CSS stylesheet ... */
import "path/to/file/example.css";
 
<InstaStories config={{ preset: "instastories-preset-example" }}>
  {...content}
</InstaStories>;

Extends Standard Presets

path/to/file/example.css
.documentation-example.instastories-viewer,
.documentation-example.instastories-stories {
  --is-preset-name: "example";
}
 
.documentation-example.instastories-viewer--entering,
.documentation-example.instastories-viewer--entered {
  background-color: #39f6;
}
 
/* ... any other CSS stylesheet ... */
import "path/to/file/example.css";
 
<InstaStories
  config={{
    preview: { props: { className: "documentation-example" } },
    viewer: { props: { className: "documentation-example" } }
  }}
>
  {...content}
</InstaStories>;

Demo

Use presetsIn-App Viewer Only