An Interest In:
Web News this Week
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
March 31, 2022 07:04 am GMT
Original Link: https://dev.to/hannadrehman/instagram-style-stories-in-reactjs-59d9
Instagram style stories in ReactJs
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
Original Link: https://dev.to/hannadrehman/instagram-style-stories-in-reactjs-59d9
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To