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

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

 

 

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 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.
See also  Build a React Native StopWatch Background Timer Component Using react-native-background-timer Library in Javascript Full Project For Beginners

 

 

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

 

See also  Build a React.js Digital Clock Component Using react-digital-clock Library Using Javascript Full Project For Beginners

 

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>
        ),
    },
];

 

 

Leave a Reply