This content originally appeared on DEV Community and was authored by hannad rehman
Since the launch of Snapchat stories, every major social media platform has introduced stories format in their platform. so i tried to recreate the same format in ReactJs.
I created a simple Stories component which allows your to add stories format to your web application in few seconds.
Introducing Stories-React.
Install
npm install --save stories-react
Usage
import React from "react";
import Stories from "stories-react";
import "stories-react/dist/index.css";
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/10964888/pexels-photo-10964888.jpeg?w=300"
},
{
type: "image",
duration: 6000,
url:
"https://images.pexels.com/photos/10985425/pexels-photo-10985425.jpeg?w=300"
},
{
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"
}
];
return <Stories width="400px" height="600px" stories={stories} />;
}
export default function App() {
return (
<div className="App">
<ImagesStories />
</div>
);
}
Demo
References
This content originally appeared on DEV Community and was authored by hannad rehman

hannad rehman | Sciencx (2022-03-31T07:04:25+00:00) Instagram style stories in ReactJs. Retrieved from https://www.scien.cx/2022/03/31/instagram-style-stories-in-reactjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.