[React][라이브러리] react-realtime-drawing

# react-realtime-drawing

- React에는 수 많은 그리기 라이브러리가 있습니다. 이런 라이브러리들은 다양한 브러쉬와 편의 기능(Undo, Redo)등을 제공하지만, 그만큼 자신의 프로젝트에 적용 시키는 일은 쉽지 않습니다. 오늘 소개할 react-realtime-drawing 라이브러리는 아주 색깔과 두께 정도만 지정할 수 있는 대신, 아주 가볍고, 적용이 쉬운 Drawing 라이브러리 입니다.

 

# 데모 페이지

https://jsaari97.github.io/react-realtime-drawing/

React Realtime Drawing

 

# 설치 방법

yarn add react-realtime-drawing

 

# 사용 방법

import React from 'react';
import { useRealtimeDrawer, useRealtimeViewer } from 'react-realtime-drawing';

export default () => {
  const [viewerRef, { onChange }] = useRealtimeViewer();

  const [drawerRef] = useRealtimeDrawer({
    color: '#00ffaa',
    onChange
  });

  return (
    <div>
      <div style={{ width: 512, height: 512 }}>
        <canvas ref={drawerRef} />
      </div>
      <div style={{ width: 512, height: 512 }}>
        <canvas ref={viewerRef} />
      </div>
    </div>
  );
}

---