React에서 가로 스크롤 구현하기 (react-horizontal-scrolling-menu)

리액트에서 마우스 휠로 가로 스크롤을 사용하기 위해 직접 만들어도 되지만, 

width값 설정부터 wheel값도 가져와야 하고 많은 공수가 들어갑니다. 

다행히 간단하게 활용할 수 있는 라이브러리가 있어서 공식 사이트의 예제를 가지고 hook버전으로 구현해 보았습니다. 

 

URL : https://www.npmjs.com/package/react-horizontal-scrolling-menu

DEMO: https://codesandbox.io/s/lpjol1opmq

1. 설치

npm install --save react-horizontal-scrolling-menu

 

2. 적용하기

저는 필요한 부분만 적용하고 싶어 잡다한 기능은 배제하고 아주 심플하게 마우스 휠 스크롤만 사용하려고 합니다. 

사용할 데이터는 코드 블록에 넣으니 자꾸 에러가 나네요. 

예제에 나와있는 그대로 

const list = [{name: 'item1'}, ..., {name: 'item25'}] 

이렇게 사용하였습니다.

import ScrollMenu from 'react-horizontal-scrolling-menu' // ScrollMenu 가져오기

let list // 임시데이터 선언

// Item 단위의 컴포넌트
const MenuItem = ({ text }) => {
  return <div className="menu-item">{text}</div>;
};

// MenuItem들을 list만큼 생성한 List단위의 컴포넌트
export const Menu = list => (
  list.map(el => {
    const { name } = el;
    return <MenuItem text={name} key={name} />
  })
);

function App() {

  const [DataItem, setDataItem] = useState(null);
  useEffect(() => {
    setDataItem(Menu(list)); // Menu컴포넌트를 state에 저장
  }, [])
 

  return (
    <div className="App">
      <div className="wrap">
      // ScrollMenu 컴포넌트로 감싸주면 됩니다.
      {
        DataItem &&
        <ScrollMenu
          data={DataItem}
          wheel={true} // wheel 이 false 면 작동하지 않습니다
        />
      }
      </div>
    </div>
  );
}

export default App;

끝입니다. 아주 간단하네요. 

 

3. 결과

마우스 스크롤을 내렸을 때 오른쪽으로 잘 스크롤됩니다. 

 

이외에 다양한 옵션들이 있으니 사이트 가서 확인해 보세요~ 😀