Skip to content
TypeScript
Branch: master
Clone or download
kmkzt chore(deps): update all patch dependencies (patch) (#9)
chore(deps): update all patch dependencies (patch)
Latest commit aedf82e Sep 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs feat: update svg-drawing library May 31, 2019
lib feat: update svg-drawing library May 31, 2019
src fix: remove unuse comment May 28, 2019
.editorconfig feat: initial commit May 26, 2019
.eslintrc.js feat: initial commit May 26, 2019
.gitattributes feat: initial commit May 26, 2019
.gitignore feat: initial commit May 26, 2019
.npmignore
.release-it.json feat: initial commit May 26, 2019
.travis.yml feat: initial commit May 26, 2019
CHANGELOG.md docs: add CHANGELOG May 26, 2019
LICENSE Create LICENSE May 26, 2019
README.md docs: fix drawing methods example code May 27, 2019
babel.config.js feat: initial commit May 26, 2019
jest.config.js feat: initial commit May 26, 2019
package.json chore(deps): update all patch dependencies Sep 1, 2019
prettier.config.js feat: initial commit May 26, 2019
renovate.json feat: initial commit May 26, 2019
template.html feat: initial commit May 26, 2019
tsconfig.json feat: initial commit May 26, 2019
webpack.config.js feat: initial commit May 26, 2019
webpack.dev.config.js feat: initial commit May 26, 2019
webpack.prod.config.js feat: initial commit May 26, 2019

README.md

react-hooks-svgdrawing

introduction

react-hooks-svgdrawing is react drawing library.

demo

Get started

yarn add react react-hooks-svgdrawing

How to use

started

import React from 'react'
import { useSvgDrawing } from 'react-hooks-svgdrawing'

const Drawing = () => {
  const [
    renderRef,
    action
  ] = useSvgDrawing()
  return <div ref={renderRef}>
}

Drawing init options.

const [renderRef, action] = useSvgDrawing({
  penWidth: 10, // pen width
  penColor: '#e00', // pen color
  width: 300, // drawing area width
  height: 300 // drawing area height
})

Drawing methods.

// action
const [renderRef, action] = useSvgDrawing()

// drawing all clear
action.clear()

// svg download
action.download()

// undo drawing
action.undo()

// change pen config
action.changePenColor('#00b')
// change pen widht
action.changePenWidth(10)

// get svgXML
// return SVGElement
console.log(action.getSvgXML()) // <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500"><defs></defs><g id="two-0" transform="matrix(1 0 0 1 0 0)" opacity="1"><path transform="matrix(1 0 0 1 0 0)" d="..." fill="transparent" stroke="#000" stroke-width="3" stroke-opacity="1" fill-opacity="1" class="" visibility="visible" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" id="two-1"></path></g></svg>

example code

You can’t perform that action at this time.