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)