20220928 React에서 인스타 스토리처럼 하기

react-insta-stories

인스타스토리처럼 표현가능한 라이브러리

 

1. 설치

yarn add react-insta-stories

 

GitHub - mohitk05/react-insta-stories: A React component for Instagram like stories

 

 import Stories from "react-insta-stories";
 
 const initialStories = [
 //이걸 여러개 만들어서 인스타스토리 처럼 만들기 {} 안에 든 것
    {
      url: "동영상 주소 유튭은 재생안됌",
      // 타입 바꿔서 텍스트나 이미지 등 다양하게 사용가능
      type: "video",
      //헤더 제거 가능
      header: {
        heading: "닉네임 여기에",
        profileImage:
          "프로필 이미지 url",
      },
    },
  ];
  const [stories, setStories] = React.useState(initialStories);
  return (
    <React.Fragment>
      <Stories
        stories={stories}
        defaultInterval={1500} //한 페이지에서 머무를 시간 지정
        width={"100%"}  //넓이
        height={"80vh"} // 높이
        style={{   // 스타일 꾸미기 가능
          display: "flex",
          justifyContent: "center",
          cursor: "pointer",
        }}
        // 무한재생
        loop={true} 
        //키보드로 이동가능하게 할 것 인지
        keyboardNavigation={true}
        isPaused={() => {}}
        currentIndex={() => {}}
        onStoryStart={() => {}}   
        // 한페이지 끝났을때 콘솔로 찍어보기~
        // onStoryEnd={(s, st) => {       
        //   console.log("story ended", s, st);
        // }}
        onStoryEnd={() => {}}
        onAllStoriesEnd={() => {}}
      />
    </React.Fragment>
  );
};

적용햇을때!