React.js Instagram Stories Builder Component Using react-insta-stories-wh Library Full Tutorial With Examples

You are currently viewing React.js Instagram Stories Builder Component Using react-insta-stories-wh Library Full Tutorial With Examples

 

Welcome folks today in this blog post we will be building instagram stories using react-insta-stories-wh library. All the source code of examples are given below.

 

 

Install

 

 

 

 

 

Demo

 

 

You can see the live demo of component here

 

 

 

Screenshot

 

 

 

 

Usage

 

 

 

 

Here in this component you see various properties

 

defaultInterval is the amount of delay that you can put in between the images and videos inside stories

width It is the width of the story

height It is the height of the story

 

Here stories is an array of story objects

 

 

Story Object

 

 

Property Description
url The url of the resource, be it image or video.
duration Optional. Duration for which a story should persist.
header Optional. Adds a header on the top. Object with headingsubheading and profileImage properties.
seeMore Optional. Adds a see more icon at the bottom of the story. On clicking, opens up this component. (v2: updated to Function instead of element)
type Optional. To distinguish a video story. type: 'video' is necessary for a video story.
styles Optional. Override the default story styles mentioned below.

 

 

Default Story Styles

 

 

 

 

 

Stories with Multiple Images

 

 

 

 

 

You can also pass a delay to each image inside story like this

 

 

 

 

 

Add Header to Story

 

 

 

 

 

See More Story Block

 

 

You can also add a see more block inside story so that when you click see more another block will display

 

 

 

 

 

Adding Video to Story

 

 

You can also add video to stories like this

 

 

 

 

 

Custom Stories

 

 

 

 

Leave a Reply