Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 31, 2022 07:04 am GMT

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

CodeSandbox demo

All Story type demos

References

Stories React Blog post


Original Link: https://dev.to/hannadrehman/instagram-style-stories-in-reactjs-59d9

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To