A hooks to svg drawing.
react-hooks-svgdrawingis React drawing library. This library is a React extension of svg-drawing
yarn add react react-hooks-svgdrawing
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')
// 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