[React][라이브러리 소개] react-signature-canvas로 서명 기능 구현하기

 

# react-signature-canvas를 활용해서 서명 기능 구현 방법

-  웹 개발을 하다보면, 사용자 서명을 받는 컴포넌트가 필요한 경우가 있습니다. 직접 구현을 해도 되지만, 기능이 가지는 중요도에 비해, 개발에 많은 시간이 소요되기 때문에, 오늘 포스팅에서 소개 할 라이브러리를 활용하시면 좋을 것 같습니다. 해당 라이브러리는 signature-pad라는 자바스크립트용 라이브러리를 리액트 용으로 랩핑한 라이브러리 입니다. 자바스크립트에서 사용하실 분은 링크를 참고하시면 될 것 같습니다

 

# 깃헙 페이지

- react-signature-canvas  깃헙 페이지

 

GitHub - agilgur5/react-signature-canvas: A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavi

- signature-pad 깃헙 페이지

GitHub - szimek/signature_pad: HTML5 canvas based smooth signature drawing

 

# 설치 및 사용법

- yarn 또는 npm으로 라이브러리를 설치합니다

yarn add react-signature-canvas

- 아래와 같이 컴포넌트를 구현하실 수 있습니다

import React from 'react'
import ReactDOM from 'react-dom'
import SignatureCanvas from 'react-signature-canvas'

ReactDOM.render(
  <SignatureCanvas penColor='green'
    canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />,
  document.getElementById('react-container')
)

- 기본적인 프로퍼티들과 그 값은 아래와 같습니다. 서명을 삭제하거나, 필요한 형태로 변환할 수 있는 API 및 콜백 또한 제공하고 있으니, 필요하신 분들은 깃헙 페이지를 참고해주시기 바랍니다

• velocityFilterWeight : number, default: 0.7
• minWidth : number, default: 0.5
• maxWidth : number, default: 2.5
• minDistance: number, default: 5
• dotSize : number or function, default: () => (this.minWidth + this.maxWidth) / 2
• penColor : string, default: 'black'
• throttle: number, default: 16

 

# 데모 페이지

Signature Pad Example

---