[React] Marquee 슬라이더 만들기

🎨 npm react-fast-marquee 패키지로 marquee 슬라이더 만들기

🔗 Install

npm install react-fast-marquee --save

App.js

import React from "react";
import MyComponent from "../components/MyComponent";
import Marquee from "react-fast-marquee";

const App = () => (
  <Marquee>
    <MyComponent />
    <MyComponent />
    <MyComponent />
  </Marquee>
);

export default App;

Props

style Object
👉 div 컨테이너의 인라인 스타일

className string
👉 div 컨테이너의 css class명

play boolean
👉 marquee의 재생 / 일시정지 여부

pauseOnHover boolean
👉 마우스 오버 시 일시정지 여부

pauseOnClick boolean
👉 클릭 시 일시정지 여부

direction "left" or "right"
👉 슬라이딩 방향 설정

speed number
👉 속도 설정 (픽셀/초)

delay number
👉 애니메이션 지연 시간 설정 (초)

loop number
👉 반복 횟수 (무한 = 0)

gradient boolean
👉 그라데이션 표시 여부

gradientColor Array<number> of length 3
👉 그라데이션 rgb 컬러 설정

gradientWidth number or string
👉 그라데이션 너비 설정

children ReactNode
👉 marquee 하위 요소