https://github.com/kmkzt/react-hooks-svgdrawing
A hooks to svg drawing.
https://github.com/kmkzt/react-hooks-svgdrawing
Last synced: about 1 month ago
JSON representation
A hooks to svg drawing.
- Host: GitHub
- URL: https://github.com/kmkzt/react-hooks-svgdrawing
- Owner: kmkzt
- License: mit
- Created: 2019-05-26T17:20:31.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-10T21:12:53.000Z (about 1 month ago)
- Last Synced: 2025-03-11T11:12:05.862Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://kmkzt.github.io/react-hooks-svgdrawing/
- Size: 1.6 MB
- Stars: 201
- Watchers: 3
- Forks: 11
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-cn - react-hooks-svgdrawing - SVG Drawing with React hooks (Uncategorized / Uncategorized)
- fucking-awesome-react-hooks - `react-hooks-svgdrawing`
- awesome-react - react-hooks-svgdrawing - SVG Drawing with React hooks
- awesome-learning-resources - react-hooks-svgdrawing - SVG Drawing with React hooks (Uncategorized / Uncategorized)
- awesome-react-hooks-cn - `react-hooks-svgdrawing`
- awesome-react-hooks - `react-hooks-svgdrawing`
- awesome-react-hooks - `react-hooks-svgdrawing`
- awesome-react - react-hooks-svgdrawing - A hooks to svg drawing. ` 📝 5 days ago` (React [🔝](#readme))
README
# react-hooks-svgdrawing
[](https://www.npmjs.com/package/react-hooks-svgdrawing) [](https://www.npmjs.com/package/react-hooks-svgdrawing)
`react-hooks-svgdrawing` is React drawing library. This library is a React extension of [svg-drawing](https://github.com/kmkzt/svg-drawing)
**[demo](https://kmkzt.github.io/react-hooks-svgdrawing/)**
## Get started
```shell
yarn add react react-hooks-svgdrawing
```
## How to use
This is example.
```javascript
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.
```javascript
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.
```javascript
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()) //