stories-react

stories-react

A React component For Instagram like stories

Homepage

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