by kmkzt

A hooks to svg drawing.

140 Stars 8 Forks Last release: 26 days ago (v2.1.2) MIT License 143 Commits 13 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


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')

// 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.