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 t…


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

CodeSandbox demo

All Story type demos

References

Stories React Blog post


This content originally appeared on DEV Community and was authored by hannad rehman


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » Instagram style stories in ReactJs." hannad rehman | Sciencx - Thursday March 31, 2022, https://www.scien.cx/2022/03/31/instagram-style-stories-in-reactjs/
HARVARD
hannad rehman | Sciencx Thursday March 31, 2022 » Instagram style stories in ReactJs., viewed ,<https://www.scien.cx/2022/03/31/instagram-style-stories-in-reactjs/>
VANCOUVER
hannad rehman | Sciencx - » Instagram style stories in ReactJs. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/31/instagram-style-stories-in-reactjs/
CHICAGO
" » Instagram style stories in ReactJs." hannad rehman | Sciencx - Accessed . https://www.scien.cx/2022/03/31/instagram-style-stories-in-reactjs/
IEEE
" » Instagram style stories in ReactJs." hannad rehman | Sciencx [Online]. Available: https://www.scien.cx/2022/03/31/instagram-style-stories-in-reactjs/. [Accessed: ]
rf:citation
» Instagram style stories in ReactJs | hannad rehman | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.