URL 복사하기 버튼 만드는 방법

API

URL 복사하기 버튼 만들기

어떤 이미지를 클릭하면, 해당 URL을 복사하고, 복사완료! 라는 tooltip이 잠깐 뜨게 하는 기능을 만들어 보자.

  1. react-copy-to-clipboard npm 설치
  2. 위 npm으로 URL 복사 버튼 만들기
  3. 버튼을 클릭하면, 몇 초 동안 복사완료! 라는 tooltip 생성
  4. css로 tooltip 위치 조절


1. react-copy-to-clipboard npm 설치

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


2~3. URL 복사 버튼 및 복사완료! tooltip 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React, { Component } from 'react';
import url from '../../image/url.png'
import { CopyToClipboard } from 'react-copy-to-clipboard';

export default class Share extends Component{
  state = {
    copyUrl: 'https://google.com/',
    copied: false
  }
  closeCopied = () => {
    setTimeout(() => {
      this.setState({copied: false})
    }, 2000)
  }
  onCopy = () => {
    this.setState({copied: true}, () => this.closeCopied());
  }
  render(){
    return(
      <section className="share">
          <div className='share-box'>

            // URL 복사 버튼
            <CopyToClipboard onCopy={this.onCopy} text={this.state.copyUrl}>
              <button><img src={url} alt='url'/></button>
            </CopyToClipboard>

            // 복사완료! tooltip
            {this.state.copied ?
              <span>복사완료!</span>
              :
              null
            }

          </div>
    </section>
    )
  }
}


4. css로 tooltip 위치 조절

다음과 같이 css를 작성하면, 약간 작은 tooltip이 생성된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.share-box span{
	background-color: #000000;
	background-color: rgba(0, 0, 0, 0.8);
	box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);

	border-radius: 5px;

	color: #FFFFFF;
	font-size: 12px;

	margin-bottom: 10px;
	top: 0;
	padding: 7px 12px;
	position: absolute;
	width: auto;
	min-width: 50px;
	max-width: 300px;
	word-wrap: break-word;

	z-index: 9999;
}