Add Instagram like stories in React

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

Output - Add Instagram like stories in React - Clue Mediator

Add Instagram like stories in React

1. Project structure
2. Package dependencies
3. Implementation
4. 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

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">
				<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 0="" style={{ margintop: '70%', marginbottom: }}>🌝</h1>
				<h1 5="" style={{ margintop: }}>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 class="App">
      <h4>Add Instagram like stories in React - <a href="https://www.cluemediator.com">Clue Mediator</a></h4>
      <div class="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' }}
        />
      </stories></div>
    </div>
  );
}

export default App;

index.css

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>
);
</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