Instagram style stories in ReactJs

hannad rehman — Thu, 31 Mar 2022 07:04:25 +0000

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

Forem: hannad rehman

Instagram style stories in ReactJs

Install

Usage

Demo

References