ReactJs의 Instagram 스타일 스토리

6507 단어 webdevjavascriptreact
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

참조

VSCode에 Anaconda 가상 환경 적용
원칙 SOLID: PHP/Laravel을 사용하지 않는 경우(Parte 01 - Responsabilidade Única)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage