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

kmkzt
181 Stars 11 Forks MIT License 195 Commits 21 Opened issues

Description

A hooks to svg drawing.

Services available

!
?

Need anything else?

Contributors list

react-hooks-svgdrawing

npm version npm download

react-hooks-svgdrawing
is 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`
})

Drawing methods.

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