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
|
1 |
npm install --save react-insta-stories |
Demo
You can see the live demo of component here
Screenshot
Usage
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
|
1 2 3 4 5 6 |
storyContent: { width: 'auto', maxWidth: '100%', maxHeight: '100%', margin: 'auto' } |
Stories with Multiple Images
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 |
const stories = [ 'https://example.com/pic.jpg', { url: 'https://example.com/pic2.jpg', duration: 5000, }, ]; |
Add Header to Story
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
|
1 2 3 4 5 6 7 8 |
const stories = [ 'https://example.com/pic.jpg', { url: 'https://example.com/vid.mp4', duration: 5000, // ignored type: 'video', }, ]; |
Custom Stories
|
1 2 3 4 5 6 7 8 9 10 11 |
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> ), }, ]; |
