react-hooks-svgdrawing

react-hooks-svgdrawing is a React drawing library. This library is a React extension of svg-drawing

demo

Get started

yarn add react react-hooks-svgdrawing

How to use

This is example.

import React from 'react'
import { useSvgDrawing } from 'react-hooks-svgdrawing'
const Drawing = () => {
  const [renderRef, draw] = useSvgDrawing()
  // Drawing area will be resized to fit the rendering area
  return 

}

useSvgDrawing options.

const [renderRef, draw] = useSvgDrawing({
  penWidth: 10, // pen width
  penColor: '#e00', // pen color
  close: true, // Use close command for path. Default is false.
  curve: false, // Use curve command for path. Default is true.
  delay: 60, // Set how many ms to draw points every.
  fill: ''// Set fill attribute for path. default is none
})

const [renderRef, draw] = useSvgDrawing()
// Call the SvgDrawing. Access the current settings of penWidth, penColor etc
// Details are https://github.com/kmkzt/svg-drawing.
console.log(draw.instance.penColor) // #333
console.log(draw.instance.penWidth) // 1
// Erase all drawing.
draw.clear()
// Download image.
draw.download() // default svg download
draw.download('svg')
draw.download('png')
draw.download('jpg')
// Get base64 string
draw.getBase64()
// Undo drawing.
draw.undo()
// Change pen config
draw.changePenColor('#00b')
// Change pen width
draw.changePenWidth(10)
// Change fill attribure of svg path element.
draw.changFill('#00b')
// Change throttle delay of  drawing
draw.changeDelay(10)
// Set whether to use curved comma for svg path element.
draw.changCurve(false)
// Set whether to use curved comma for svg path element.
draw.changeClose(true)
// get svgXML
// return SVGElement
console.log(draw.getSvgXML()) // 


---


Tranlated By Open Ai Tx | Last indexed: 2026-04-21


---