[React] Copy to clipborad

버튼을 클릭했을 시 사용자의 클립보드에 원하는 text를 복사하기 위해 

 

react-copy-to-clipboard 라이브러리를 사용하였다.

 

타입스크립트 기준으로 npm install --save @types/react-copy-to-clipboard 명령어를 통해 라이브러리를 설치할 수 있다.

 

먼저 두 개의 state를 만들어주었다.

  const [value, setValue] = useState<string>('')
    const [copied, setCopied] = useState<boolean>(false)

첫 번째는 clipboard에 copy할 텍스트이며, 두 번째는 복사가 됐을 때 변경해줄 boolean 값이다.

 

import {CopyToClipboard} from 'react-copy-to-clipboard'

라이브러리를 사용하기 위해 위와 같이 선언을 해준다.

 

				<CopyToClipboard
                    text={value}
                    onCopy={() => {
                        setCopied(true)
                    }}
                >
                    <div className="link">
                        {' '}
                        <img id="link" src={link} alt="link" />
                    </div>
                </CopyToClipboard>

이후 위와 같이 <CopyToClipboard> 엘리먼트로 클릭할 버튼을 감싸주면 된다.

 

속성으로 들어가는 text는 클립보드에 카피할 텍스트이며, onCopy 함수는 클릭시 실행 될 함수이다.