Install

npm install --save stories-react

Demo

You can find working demo here

Usage

import React from 'react';
import Stories from 'stories-react';
import 'stories-react/dist/index.css';

export default function ImagesStories() {
  const stories = [
    {
      type: 'image',
      url: 'https://images.pexels.com/photos/9470805/pexels-photo-9470805.jpeg?w=300',
      duration: 5000,
    },
    {
      type: 'image',
      duration: 6000,
      url: 'https://images.pexels.com/photos/9733197/pexels-photo-9733197.jpeg?w=300',
    },
    {
      duration: 7000,
      type: 'image',
      url: 'https://images.pexels.com/photos/9470805/pexels-photo-9470805.jpeg?w=300',
    },
  ];

  return <Stories width="400px" height="600px" stories={stories} />;
}

Props

| Property | Type | Default | Description | | ------------------------------ | ------------------------ | ------- | ----------------------------------------------------------------------------------- | | stories | IStoryObject[] | [] | An array of story objects. description of IStoryObject is mentioned below | | height | string | 100% | Height of story container | | width | string | 100% | Width of story container | | onStoryChange | function(index:number) | - | Callback called when story changes | | onStoriesStart | function | - | Callback called when first story is rendered. it get called only once, | | onAllStoriesEnd | function | - | Callback called when last story gets completed. it will get called only once | | currentIndex | number | - | Current index of the story which should be selected first | | defaultDuration | number | 10000 | default duration in ms of stories if duration is not provided in the IStoryObject | | classNames | IStoryClassNames | {} | classnames to overide different sections of a story renderer | | pauseStoryWhenInActiveWindow | boolean | true | pauses story when window goes out of focus (user changes tab/minimizes browser etc |

IStoryObject

| Property | Type | Default | Description | | ------------------ | ------------------------------------ | ------- | ------------------------------------------------ | | type | image , video , component | - | type of story to render | | url | string | - | url of a story (image & video only) | | duration | duration | 10000 | duration in ms of the story | | component | React Component | - | custom component to render as a story | | header | React Component | - | header of a story | | seeMore | string , boolean , React Component | true | See more action text | | seeMoreComponent | React Component | - | see more component opens after clicking see more | | onSeeMoreClick | function(index:number) | - | Callback called when story see more is clicked |

IStoryClassNames

| Property | Type | Default | Description | | ---------------------- | -------- | ------- | ----------------------------------------------- | | main | string | - | classname for main container | | progressContainer | string | - | classname for progress line container | | progressBarContainer | string | - | classname for single progress bar box container | | progressBar | string | - | classname for progress bar | | storyContainer | string | - | classname for story container |

Custom Component Story Props

| Property | Type | | Description | | ---------- | -------------- | --- | ------------------------- | | pause | function | | call it to pause a story | | resume | function | | call it to resume a story | | story | IStoryObject | | current story properties | | isPaused | boolean | | state of a story |