v0.1.0 - only use a canvas element, with no styling needed

- No other elements are rendered by this component other than a
  canvas (as it should be for a library)
- Styling is not _necessary_ but can be added to surrounding elements
  or by passing a `canvasProps` object prop, which can define
  `style` or `className` and is directly passed to underlying
  canvas element

- Use PropTypes and ES6 function binding instead of calling .bind()
- clear() no longer takes an event as a prop as it's not attached
  to a button anymore
  - Also use ev var instead of event to prevent confusion with event
    objects
- remove toDataURL() and create getCanvas() instead
- create getTrimmedCanvas() to return a trimmed copy of the canvas,
  removing any whitespace of the canvas

- Align closer to standard style where code was changed
  - 2 space, no semicolon.
  - Use ES6 let + import as well

- Move example code to its own directory
  - Configure webpack-dev-server to property use this directory
- Remove lib and don't push compiled artifacts to the repo
  - Users can use npmcdn if they really need to
  - gitignore the build/ directory

- Add better documentation for all Props + API methods
- Bump version to 0.1.0 + add .npmignore

Author: agilgur5

.gitignore

@@ -1,13 +1,9 @@
-# See https://help.github.com/articles/ignoring-files for more about ignoring files.
-#
-# If you find yourself ignoring temporary files generated by your text editor
-# or operating system, you probably want to add a global ignore instead:
-#   git config --global core.excludesfile '~/.gitignore_global'
+build/
 
-/tmp
-/build
+npm-debug.log*
+node_modules/
+
+*.tgz
 
 .DS_Store
-npm-debug.log
-/node_modules/*
-react-signature-pad-*.tgz
+*~

.npmignore

@@ -0,0 +1,10 @@
+example/
+webpack.*
+
+npm-debug.log*
+node_modules/
+
+*.tgz
+
+.DS_Store
+*~

README.md

@@ -1,61 +1,89 @@
-[![npm package](https://img.shields.io/badge/npm-0.0.5-orange.svg?style=flat-square)](https://www.npmjs.com/package/react-signature-pad)
+# React Signature Canvas
 
-# React Signature Pad
-A [signature pad](https://github.com/szimek/signature_pad) implementation for react.
+[![NPM](https://nodei.co/npm/react-signature-canvas.png)](https://npmjs.org/package/react-signature-canvas)
 
-# Basic Usage
+A [signature pad](https://github.com/szimek/signature_pad) implementation in
+React.
 
-```javascript
-var React = require('react');
-var SignaturePad = require('react-signature-pad');
+This is an _unopinionated_ fork of
+[react-signature-pad](https://github.com/blackjk3/react-signature-pad)
+that does not impose any styling or wrap any other unwanted elements around
+your canvas -- it's just a wrapper around a single canvas element! Hence the
+naming difference.
 
-React.render(
-  <SignaturePad clearButton="true" />,
-  document.body
-)
-```
+This fork also allows you to directly pass [props](#props) to the underlying
+canvas element, has small [API differences](#api), and
+[documents the props](#props) you can pass to it.
 
-# Methods
+## Installation
 
-```javascript
-<SignaturePad clearButton="true" ref="mySignature" />
-...
+`npm i -S react-signature-canvas`
+
+## Usage
 
-var signature = this.refs.mySignature;
+```javascript
+import React from 'react'
+import ReactDOM from 'react-dom'
+import SignatureCanvas from 'react-signature-canvas'
+
+ReactDOM.render(
+  <SignatureCanvas penColor='green'
+    canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />,
+  document.getElementById('react-container')
+)
+```
 
-// Methods
+### Props
 
-// ===============================================
-// isEmpty() - returns boolean
-// ===============================================
+The props of SignatureCanvas mainly control the properties of the pen stroke
+used in drawing. All props are **optional**.
 
-signature.isEmpty();
+- `velocityFilterWeight` : `number`, default: `0.7`
+- `minWidth` : `number`, default: `0.5`
+- `maxWidth` : `number`, default: `2.5`
+- `dotSize` : `number` or `function`,
+  default: `() => (this.props.minWidth + this.props.maxWidth) / 2`
+- `penColor` : `string`, default: `'black'`
 
-// ===============================================
-// clear() - clears canvas
-// ===============================================
+There are also two callbacks that will be called when a stroke ends and one
+begins, respectively.
 
-signature.clear();
+- `onEnd` : `function`
+- `onBegin` : `function`
 
-// ===============================================
-// toDataURL() - retrieves image as a data url
-// ===============================================
+Two additional props are used to control the canvas element. `canvasProps` are
+directly passed to the underlying `<canvas />` element and `backgroundColor` is
+used in the [API's](#api) `clear` convenience method (which itself is called
+internally during resizes)
 
-signature.toDataURL();
+- `canvasProps`: `object`
+- `backgroundColor` : `string`, default: `'rgba(0,0,0,0)'`
 
-// ===============================================
-// fromDataURL() - writes a base64 image to canvas
-// ===============================================
+### API
 
-signature.fromDataURL(base64String);
+All API methods require a ref to the SignatureCanvas in order to use and are
+instance methods of the ref.
 
+```javascript
+<SignatureCanvas ref={(ref) => { this.sigCanvas = ref }} />
 ```
 
-# CSS
-In order to make the signature pad work correctly you will need the css as well.  All the relevant styles are in [this file](style.css).
+- `isEmpty()` : `boolean`, self-explanatory
+- `clear()` : `void`, clears the canvas using the `backgroundColor` prop
+- `fromDataURL(base64String)` : `void`, writes a base64 image to canvas
+- `getCanvas()`: `canvas`, returns the underlying canvas ref. Allows you to
+  modify the canvas however you want or call methods such as `toDataURL()`
+- `getTrimmedCanvas()`: `canvas`, creates a copy of the canvas and returns a
+  trimmed version of it, with all whitespace removed.
+
+## Example
 
-# Example
 ```bash
 $ npm start
 ```
-Then navigate to http://localhost:8080/ in your browser and you should be able to see the signature pad in action.
+
+Navigate to [http://localhost:8080/](http://localhost:8080/) in your browser
+and you should be able to see the signature canvas in action.
+
+The source code for this example is found in the [`example/`](example/)
+directory.

app.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+import SignaturePad from '../src/index.js'
+
+import styles from './styles.cssm'
+
+class App extends Component {
+  state = {trimmedDataURL: null}
+  sigPad = {}
+  clear = () => {
+    this.sigPad.clear()
+  }
+  trim = () => {
+    this.setState({trimmedDataURL: this.sigPad.getTrimmedCanvas()
+      .toDataURL('image/png')})
+  }
+  render () {
+    let {trimmedDataURL} = this.state
+    return <div className={styles.container}>
+      <div className={styles.sigContainer}>
+        <SignaturePad canvasProps={{className: styles.sigPad}}
+          ref={(ref) => { this.sigPad = ref }} />
+      </div>
+      <div>
+        <button className={styles.buttons} onClick={this.clear}>
+          Clear
+        </button>
+        <button className={styles.buttons} onClick={this.trim}>
+          Trim
+        </button>
+      </div>
+      {trimmedDataURL
+        ? <img className={styles.sigImage}
+          style={{backgroundImage: 'url(' + trimmedDataURL + ')'}} />
+        : null}
+    </div>
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('container'))

example/app.js

@@ -0,0 +1,9 @@
+<html>
+<head>
+  <title>Signature Pad Example</title>
+</head>
+<body>
+  <div id='container'></div>
+  <script src='build/bundle.js'></script>
+</body>
+</html>

example/index.html

@@ -0,0 +1,36 @@
+body {
+  background-color: gray;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  top: 10%;
+  left: 10%;
+}
+
+.sigContainer {
+  width: 80%;
+  height: 80%;
+  margin: 0 auto;
+  background-color: #fff;
+}
+
+.sigPad {
+  width: 100%;
+  height: 100%;
+}
+
+.buttons {
+  width: 100%;
+  height: 30px;
+}
+
+.sigImage {
+  background-size: 200px 50px;
+  width: 200px;
+  height: 50px;
+}

example/styles.cssm

@@ -1,38 +1,51 @@
 {
-  "name": "react-signature-pad",
-  "version": "0.0.5",
-  "description": "A signature pad implementation for react.",
-  "main": "lib/app.js",
+  "name": "react-signature-canvas",
+  "version": "0.1.0",
+  "description": "A signature pad implementation in React",
+  "main": "build/index.js",
   "scripts": {
     "test": "webpack && npm pack",
-    "start": "webpack-dev-server --hot --inline",
+    "start": "webpack-dev-server -d --inline --hot",
     "dist": "webpack -p --config webpack.production.config.js"
   },
   "keywords": [
     "react",
     "react-component",
+    "component",
     "signature",
-    "form",
-    "ui"
+    "sign",
+    "canvas",
+    "draw",
+    "pad",
+    "signature-pad",
+    "react-signature-pad"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/blackjk3/react-signature-pad.git"
+    "url": "https://github.com/agilgur5/react-signature-canvas.git"
   },
-  "author": "Jason Kadrmas",
+  "author": "Anton Gilgur",
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^5.6.15",
-    "babel-loader": "^5.3.1",
-    "node-libs-browser": "^0.5.2",
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3",
+    "babel-core": "^6.0.14",
+    "babel-loader": "^6.0.0",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-2": "^6.13.0",
+    "css-loader": "^0.24.0",
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
     "react-hot-loader": "^1.2.7",
-    "webpack": "^1.10.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.2",
     "webpack-dev-server": "^1.10.1"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0",
     "react-dom": "^0.14.0 || ^15.0.0"
+  },
+  "dependencies": {
+    "copy-canvas": "^1.0.0",
+    "trim-canvas": "^0.1.0"
   }
 }