How to integrate Instagram/Snapchat style stories into your ReactJs application

Introduction

Snapchat Stories, which debuted in October 2013, was a new way of sharing our lives with the rest of the world. Users may post their photographs in a narrative manner that others could watch as many times as they wanted for up to 24 hours. Although we are all familiar with the notion now, this was a breakthrough moment in the history of social media. Social media users grew more raw, real, and relatable as a result of this real-time documentary format. Other social networks picked up on the Stories concept a few years later. Today's social media platforms, such as Facebook, Instagram, Snapchat, Youtube, and Whatsapp, all have stories built in, therefore it's only natural that your online application does as well.

Introducing React Stories component.

React Stories is a light weight (3kb) gzipped component which implements Instagram/Snapchat like stories

Setting up the project

We will use create react app in this project

npx create-react-app my-app
cd my-app

Install stories-react npm package

npm install stories-react —save

Start your react project

npm start

Create Stories component

import React from 'react';
import Stories from 'stories-react';
import 'stories-react/dist/index.css';

export default function ImagesStories() {
 const stories = [
   {
     type: 'image',
     url: 'https://images.pexels.com/photos/9470805/pexels-photo-9470805.jpeg?w=300',
     duration: 5000,
   },
   {
     type: 'image',
     duration: 6000,
     url: 'https://images.pexels.com/photos/9733197/pexels-photo-9733197.jpeg?w=300',
   },
   {
     duration: 7000,
     type: 'image',
     url: 'https://images.pexels.com/photos/9470805/pexels-photo-9470805.jpeg?w=300',
   },
 ];

 return (
     <Stories
       width="400px"
       height="600px"
       stories={stories}
     />
 );
}

That is all there is to it. Now your project has Stories embedded in it.

This package's whole API can be found here.

Conclusion

I Hope this blog helped you in implementing stories in your web project.

You can see the official documentation of the React Stories package here.

If there are any issues regarding this project you can report them here.

For any feedback for this post, feel free to give it here