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>
);
}
Top comments (0)