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

 

 

npm install --save react-insta-stories

 

 

 

Demo

 

 

You can see the live demo of component here

 

 

 

Screenshot

 

 

 

 

Usage

 

 

import React, { Component } from 'react';
 
import Stories from 'react-insta-stories';
 
const App = () => {
    return (
        <Stories
            stories={stories}
            defaultInterval={1500}
            width={432}
            height={768}
        />
    );
};

 

 

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 heading, subheading 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

 

 

storyContent: {
    width: 'auto',
    maxWidth: '100%',
    maxHeight: '100%',
    margin: 'auto'
}

 

 

 

Stories with Multiple Images

 

 

import Stories from 'react-insta-stories';
 
const stories = [
    'https://example.com/pic.jpg',
    'data:image/jpg;base64,R0lGODl....',
    'https://mohitkarekar.com/icon.png',
];
 
return () => <Stories stories={stories} />;

 

 

 

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

 

 

const stories = [
    'https://example.com/pic.jpg',
    {
        url: 'https://example.com/pic2.jpg',
        duration: 5000,
    },
];

 

 

 

Add Header to Story

 

 

const stories = [
    'https://example.com/pic.jpg',
    {
        url: 'https://example.com/pic2.jpg',
        duration: 5000,
        header: {
            heading: 'Mohit Karekar',
            subheading: 'Posted 30m ago',
            profileImage: 'https://picsum.photos/100/100',
        },
    },
];

 

 

 

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

 

 

const stories = [
    'https://example.com/pic.jpg',
    {
        url: 'https://example.com/pic2.jpg',
        duration: 5000,
        seeMore: SeeMore, // some component
    },
    {
        url: 'https://example.com/pic3.jpg',
        duration: 2000,
        seeMore: ({ close }) => {
            return <div onClick={close}>Hello, click to close this.</div>;
        },
    },
];

 

 

 

Adding Video to Story

 

 

You can also add video to stories like this

 

 

const stories = [
    'https://example.com/pic.jpg',
    {
        url: 'https://example.com/vid.mp4',
        duration: 5000, // ignored
        type: 'video',
    },
];

 

 

 

Custom Stories

 

 

const stories = [
    'https://example.com/pic.jpg',
    {
        content: (props) => (
            <div style={{ background: 'pink', padding: 20 }}>
                <h1 style={{ marginTop: '100%', marginBottom: 0 }}>🌝</h1>
                <h1 style={{ marginTop: 5 }}>A custom title can go here.</h1>
            </div>
        ),
    },
];