Need help with react-hooks-svgdrawing?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

181 Stars 11 Forks MIT License 195 Commits 21 Opened issues


A hooks to svg drawing.

Services available


Need anything else?

Contributors list


npm version npm download

is React drawing library. This library is a React extension of svg-drawing


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`

Drawing methods.

const [renderRef, draw] = useSvgDrawing()

// Call the SvgDrawing. Access the current settings of penWidth, penColor etc // Details are console.log(draw.instance.penColor) // #333 console.log(draw.instance.penWidth) // 1

// Erase all drawing. draw.clear()

// Download image. // default svg download'svg')'png')'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()) // example code

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.