react-hooks-svgdrawing

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:

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

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