[1128] react CopyToClipboard - 클릭시 텍스트 복사하기

https://www.npmjs.com/package/react-copy-to-clipboard

react-copy-to-clipboard

 

🚗 react-copy-to-clipboard 라이브러리를 이용해서 클릭시 텍스트 복사 이벤트 만들기

 

1. 라이브러리 설치

$ npm install --save react react-copy-to-clipboard

 

 

2. 사용

import { CopyToClipboard } from "react-copy-to-clipboard";

 

<CopyToClipboard text={wallet} onCopy={()=>alert("주소가 복사되었습니다")}>
  <div className="URL">{wallet}</div>
</CopyToClipboard>

 

우선 import 해와준다.

 

<CopyToClipboard>  </CopyToClipboard> 이 사이에 들어가 있는 얘들을 누르면 복사가 되는것임.

 

CopyToClipboard 컴포넌트 안에 text 속성은 내가 복사하고 싶은 텍스트를 넣어준다.

일반 텍스트는 " " 안에 넣어주는데, 나는 원하는 데이터를 back에서 가져와서 가변적으로 뿌려주기 위해서 { } 형태로 씀.

 

onCopy 속성도 있음. 이건 copy를 감지해서 copy 됐을때 이벤트 넣을 수 있음.