A hooks to svg drawing

by React

react-hooks-svgdrawing

react-hooks-svgdrawing is react drawing library.

View Demo View Github

Get started

yarn add react react-hooks-svgdrawing

How to use

started

import React from 'react'
import { useSvgDrawing } from 'react-hooks-svgdrawing'

const Drawing = () => {
  const [
    renderRef,
    action
  ] = useSvgDrawing()
  return <div ref={renderRef}>
}

Drawing init options.

const [renderRef, action] = useSvgDrawing({
  penWidth: 10, // pen width
  penColor: '#e00', // pen color
  width: 300, // drawing area width
  height: 300 // drawing area height
})

Drawing methods.

// action
const [renderRef, action] = useSvgDrawing()

// drawing all clear
action.clear()

// svg download
action.download()

// undo drawing
action.undo()

// change pen config
action.changePenColor('#00b')
// change pen widht
action.changePenWidth(10)

// get svgXML
// return SVGElement
console.log(action.getSvgXML()) // <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500"><defs></defs><g id="two-0" transform="matrix(1 0 0 1 0 0)" opacity="1"><path transform="matrix(1 0 0 1 0 0)" d="..." fill="transparent" stroke="#000" stroke-width="3" stroke-opacity="1" fill-opacity="1" class="" visibility="visible" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" id="two-1"></path></g></svg>

example code

GitHub