ReactJs의 Instagram 스타일 스토리

Snapchat 스토리 출시 이후 모든 주요 소셜 미디어 플랫폼은 플랫폼에 스토리 형식을 도입했습니다. 그래서 ReactJs에서 동일한 형식을 다시 만들려고 했습니다.

몇 초 만에 웹 애플리케이션에 스토리 형식을 추가할 수 있는 간단한 스토리 구성 요소를 만들었습니다.

소개합니다Stories-React .

설치

npm install --save stories-react

용법

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>
  );
}

데모

CodeSandbox demo

All Story type demos

참조