React 서명 라이브러리리

React signature library

React 프로젝트에서 사용할 수 있는 서명 라이브러리

1. react-signature-canvas
2. react-signature-pad
3. react-signature

검색해보면 대략 3개 정도의 라이브러리가 나온다. (react-native는 제외)

가장 많이 사용되는 라이브러리

2019년 5월 26일 기준으로는 react-signature-canvas이다.
npmtrends 참고

react-signature-canvas

1. npm i -S react-signature-canvas 설치
2. 코드 추가

   import React from 'react';
   import SignatureCanvas from "react-signature-canvas";
   import './App.css';
   
   class App extends React.Component {
    constructor(props) {
     super(props);
    
     this.state = {
      signature: ''
     }
   
     this.sigCanvas = React.createRef();
    }
   
    saveSignature = () => {
     console.log(this.sigCanvas.toDataURL());
     this.setState({ signature: this.sigCanvas.toDataURL() });
    };
   
    againgSignature = () => {
     this.sigCanvas.clear();
     this.setState({ signature: '' })
    }
   
    render() {
     return (
      <div>
       <h1>Signature</h1>
       <div style={{ backgroundColor: '#f1f1f1' }}>
        <span className="description">서명을  해주세요.</span>
        <SignatureCanvas
         ref={(ref) => { this.sigCanvas = ref }}
         canvasProps={{width: 375, height: 200, className:  'sigCanvas'}}
        />
       </div>
       <button
        className="ok"
        onClick={this.saveSignature}
       >
        확인
       </button>
       
       <br/>
       
       <button
        className="reset"
        onClick={this.againgSignature}
       >
        다시쓰기
       </button>
   
       <br/>
       <br/>
       <br/>
   
       <div>
        <h1>Result</h1>
        <img src={this.state.signature} />
       </div>
      </div>
     );
    }
   }
   
   export default App;
   

마무리

처음에 sandbox에 react-signature-canvas를 사용해봤는데, 모바일에서는 잘 동작하지 않았다. 그래서 react-signature-pad를 사용해보려 했으나 import부터 실패했다…
(내가 못하는 거겠지…?)
그래서… 다시 react-signature-canvas 라이브러리로 돌아와 다시 찾아봤다.
이 라이브러리에서 문제가 div에서 width, height를 정해주었는데, canvas의 width, height가 이상했다. 그리고, 중요한 건, 모바일에서 실행했을 때에는 지정한 div 위치 이외에 그려지는 문제이다.
canvas의 width, height만 제대로 정해주면 되는 문제였는데… 이건

<SignatureCanvas
 ref={(ref) => { this.sigCanvas = ref }}
 canvasProps={{width: 375, height: 200, className: 'sigCanvas'}}
/>

canvasProps로 넘겨주면 된다!
결국 돌고 돌아 react-signature-canvas를 사용하는 걸로~
뭐든지 문서를 차근차근 읽어보자…