Add Instagram like stories in React

by Clue Mediator · January 24, 2023

Today, we’ll show you how to add Instagram like stories in React. Here, we will create an example where we will design a React component similar to Instagram Stories. It will render images, content and video.

Demo Application

Add Instagram like stories in React

Project structure
Package dependencies
Implementation
Output

1. Project structure

react-insta-stories-example
- node_modules
- public
  - index.html
- src
  - App.js
  - index.css
  - index.js
  - utils.js
- package-lock.json
- package.json
- README.md

2. Package dependencies

Run the following command to install react-insta-stories npm package.

npm i react-insta-stories

1	npm i react-insta-stories

You will find the version of the following packages in React application.

react

^18.2.0

react-insta-stories

^2.4.2

3. Implementation

Refer to the following files for implementation.

utils.js

import { WithSeeMore } from 'react-insta-stories';

const image = {
	display: 'block',
	maxWidth: '100%',
	borderRadius: 4,
}

const contentStyle = {
	background: '#333',
	width: '100%',
	padding: 20,
	color: 'white',
	height: '100%'
}

const bgStyle = {
	maxWidth: '100%',
	height: '100%',
	padding: 40,
	background: '#ccd8e4'
}

const customSeeMore = {
	textAlign: 'center',
	fontSize: 14,
	bottom: 20,
	position: 'relative'
}

const CustomStory = ({ action, isPaused }) => {
	return <div style={{ ...contentStyle, background: 'Aquamarine', color: '#333' }}>
		<h1>Why do we use Lorem Ipsum?</h1>
		<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
		<h1>{isPaused ? 'Paused' : 'Playing'}</h1>
		<p>Thank you!</p>
	</div>
}

export const storyList = [
	{
		content: ({ action, isPaused }) => {
			return <div style={contentStyle}>
				<h1>What is Lorem Ipsum?</h1>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
				<img style={image} src="https://images.unsplash.com/photo-1565506737357-af89222625ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"></img>
				<h3>Perfect. But there's more! â†’</h3>
			</div>
		}
	},
	{
		content: ({ action, story }) => {
			return <WithSeeMore story={story} action={action}><div style={{ background: 'snow', padding: 20, height: '100%' }}>
				<h1 style={{ marginTop: '70%', marginBottom: 0 }}>ðŸŒ</h1>
				<h1 style={{ marginTop: 5 }}>We have our good old image and video stories, just the same.</h1>
			</div></WithSeeMore>
		},
		seeMoreCollapsed: ({ toggleMore, action }) => <p style={customSeeMore} onClick={() => toggleMore(true)}>A custom See More message â†’</p>,
		seeMore: ({ close }) => <div style={bgStyle}><h2>Just checking the see more feature.</h2><p style={{ textDecoration: 'underline' }} onClick={close}>Go on, close this popup.</p></div>,
		duration: 5000
	},
	{
		url: 'https://picsum.photos/1080/1920',
		seeMore: ({ close }) => <div style={bgStyle}><h2>Just checking the see more feature.</h2><p style={{ textDecoration: 'underline' }} onClick={close}>Go on, close this popup.</p></div>
	},
	{
		url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
		type: 'video'
	},
	{
		content: CustomStory
	}
]

import { WithSeeMore } from 'react-insta-stories';

const image = {

display: 'block',

maxWidth: '100%',

borderRadius: 4,

}

const contentStyle = {

background: '#333',

width: '100%',

padding: 20,

color: 'white',

height: '100%'

}

const bgStyle = {

maxWidth: '100%',

height: '100%',

padding: 40,

background: '#ccd8e4'

}

const customSeeMore = {

textAlign: 'center',

fontSize: 14,

bottom: 20,

position: 'relative'

}

const CustomStory = ({ action, isPaused }) => {

return <div style={{ ...contentStyle, background: 'Aquamarine', color: '#333' }}>

<h1>Why do we use Lorem Ipsum?</h1>

<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>

<h1>{isPaused ? 'Paused' : 'Playing'}</h1>

<p>Thank you!</p>

</div>

}

export const storyList = [

{

content: ({ action, isPaused }) => {

return <div style={contentStyle}>

<h1>What is Lorem Ipsum?</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

<h3>Perfect. But there's more! â†’</h3>

</div>

}

{

content: ({ action, story }) => {

return <WithSeeMore story={story} action={action}><div style={{ background: 'snow', padding: 20, height: '100%' }}>

<h1 style={{ marginTop: 5 }}>We have our good old image and video stories, just the same.</h1>

</div></WithSeeMore>

seeMoreCollapsed: ({ toggleMore, action }) => <p style={customSeeMore} onClick={() => toggleMore(true)}>A custom See More message â†’</p>,

seeMore: ({ close }) => <div style={bgStyle}><h2>Just checking the see more feature.</h2><p style={{ textDecoration: 'underline' }} onClick={close}>Go on, close this popup.</p></div>,

duration: 5000

{

url: 'https://picsum.photos/1080/1920',

seeMore: ({ close }) => <div style={bgStyle}><h2>Just checking the see more feature.</h2><p style={{ textDecoration: 'underline' }} onClick={close}>Go on, close this popup.</p></div>

{

url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',

type: 'video'

{

content: CustomStory

}

]

App.js

import React from 'react';
import Stories from 'react-insta-stories';
import { storyList } from './utils';

function App() {
  return (
    <div className="App">
      <h4>Add Instagram like stories in React - <a href="https://www.cluemediator.com">Clue Mediator</a></h4>
      <div className='pl-3'>
        <Stories
          loop
          keyboardNavigation
          defaultInterval={8000}
          stories={storyList}
          width={300}
          height={500}
          onStoryEnd={(s, st) => console.log('story ended', s, st)}
          onAllStoriesEnd={(s, st) => console.log('all stories ended', s, st)}
          onStoryStart={(s, st) => console.log('story started', s, st)}
          storyContainerStyles={{ borderRadius: 8, overflow: 'hidden' }}
        />
      </div>
    </div>
  );
}

export default App;

import React from 'react';

import Stories from 'react-insta-stories';

import { storyList } from './utils';

function App() {

return (

<h4>Add Instagram like stories in React - <a href="https://www.cluemediator.com">Clue Mediator</a></h4>

<Stories

loop

keyboardNavigation

defaultInterval={8000}

stories={storyList}

width={300}

height={500}

onStoryEnd={(s, st) => console.log('story ended', s, st)}

onAllStoriesEnd={(s, st) => console.log('all stories ended', s, st)}

onStoryStart={(s, st) => console.log('story started', s, st)}

storyContainerStyles={{ borderRadius: 8, overflow: 'hidden' }}

</div>

);

}

export default App;

index.css

body {
  margin: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

p {
  line-height: 25px;
}

.pl-3 {
  padding-left: 30px;
}

body {

margin: 20px;

font-family: Arial, Helvetica, sans-serif;

}

p {

line-height: 25px;

}

.pl-3 {

padding-left: 30px;

}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<App />

);

4. Output

Run your application and check the output in the browser.
Live Demo

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository StackBlitz Project

If you found value in this article,
you can support us by buying me a coffee! ☕

Add Instagram like stories in React

Demo Application

Add Instagram like stories in React

1. Project structure

2. Package dependencies

3. Implementation

4. Output

Demo & Source Code

You may also like...

2 Responses

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Join us

Add Instagram like stories in React

Demo Application

Add Instagram like stories in React

1. Project structure

2. Package dependencies

3. Implementation

4. Output

Demo & Source Code

You may also like...

How to get selected by only value for multi select in react-select

How to create tabs in React

Date Range Picker in React

Pass command line arguments to npm scripts in package.json

How to add Font Awesome 5 in React

Input masking in React

2 Responses

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Tags

Join us