Stories-react NPM

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