[TIL] react-animated-cursor 커서 디자인

react-animated-cursor🔽

GitHub - stephenscaff/react-animated-cursor: An animated custom cursor React component.

사용 예시🔽

Animated Custon Cursor - React

 

Next.js + TypeScript 환경에서 react-animated-cursor 라이브러리로 커서 디자인을 적용해보자!

 

npm i react-animated-cursor

터미널에 위 명령어를 입력해 라이브러리를 설치해준다

 

아직 TS 지원이 되지 않아 d.ts 파일을 작성해줘야 한다

 

[types/react-animated-cursor.d.ts]

declare module 'react-animated-cursor';

직접 정의 파일을 생성해준다!

 

[pages/_app.tsx]

import dynamic from 'next/dynamic';

const AnimatedCursor = dynamic(() => import('react-animated-cursor'), {
  ssr: false,
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <AnimatedCursor />
      ...
    </>
  );
}

export default MyApp;

SSR 환경이기 때문에 App.js 역할의 파일에서 위처럼 dynamic을 통해 import 해준다

 

<Example className="link" />

기본적으로 클릭이 가능한 태그에는 hover 효과가 적용되지만 그 외의 요소에 적용하려면 className에 "link"를 달아준다

 

문서를 보면 다양한 커스텀이 가능하지만 기본 색상이 잘 어울려서 그냥 사용했다!