docs: update examples to use newer React syntax (#119)

- use `createRoot` for `react-dom` rendering
- use functional components with hooks syntax

- add link to `ref` docs
- consistently use `sigCanvas` as name
  - don't switch b/t `sigPad` and `sigCanvas`

- consistently format `example/` dir with `ts-standard`
  - was previously ignored for less diff, but since the example is re-written with newer syntax, good timing to reformat it too

Author: agilgur5

Diff for: README.md

@@ -35,15 +35,16 @@ npm i -S react-signature-canvas
 
 ## Usage
 
-```javascript
+```jsx
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import SignatureCanvas from 'react-signature-canvas'
 
-ReactDOM.render(
+createRoot(
+  document.getElementById('my-react-container')
+).render(
   <SignatureCanvas penColor='green'
     canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />,
-  document.getElementById('react-container')
 )
 ```
 
@@ -80,10 +81,17 @@ Of these props, all, except for `canvasProps` and `clearOnResize`, are passed th
 
 ### API
 
-All API methods require a ref to the SignatureCanvas in order to use and are instance methods of the ref.
+All API methods require [a ref](https://react.dev/learn/manipulating-the-dom-with-refs) to the SignatureCanvas in order to use and are instance methods of the ref.
 
-```javascript
-<SignatureCanvas ref={(ref) => { this.sigCanvas = ref }} />
+```jsx
+import React, { useRef } from 'react'
+import SignatureCanvas from 'react-signature-canvas'
+
+function MyApp() {
+  const sigCanvas = useRef(null);
+
+  return <SignatureCanvas ref={sigCanvas} />
+}
 ```
 
 - `isEmpty()` : `boolean`, self-explanatory

Diff for: example/src/index.js

@@ -1,46 +1,36 @@
-import React, { Component } from 'react'
+import React, { useState, useRef } from 'react'
 import { createRoot } from 'react-dom/client'
 
-import SignaturePad from '../../src/index.tsx'
+import SignatureCanvas from '../../src/index.tsx'
 
 import * as styles from './styles.module.css'
 
-class App extends Component {
-  state = { trimmedDataURL: null }
+function App () {
+  const sigCanvas = useRef(null)
+  const [trimmedDataURL, setTrimmedDataURL] = useState(null)
 
-  sigPad = {}
-
-  clear = () => {
-    this.sigPad.clear()
+  function clear () {
+    sigCanvas.current.clear()
   }
 
-  trim = () => {
-    this.setState({
-      trimmedDataURL: this.sigPad.getTrimmedCanvas().toDataURL('image/png')
-    })
+  function trim () {
+    setTrimmedDataURL(sigCanvas.current.getTrimmedCanvas().toDataURL('image/png'))
   }
 
-  render () {
-    const { trimmedDataURL } = this.state
-    return <div className={styles.container}>
+  return (
+    <div className={styles.container}>
       <div className={styles.sigContainer}>
-        <SignaturePad canvasProps={{ className: styles.sigPad }}
-          ref={(ref) => { this.sigPad = ref }} />
+        <SignatureCanvas canvasProps={{ className: styles.sigCanvas }} ref={sigCanvas} />
       </div>
       <div>
-        <button className={styles.buttons} onClick={this.clear}>
-          Clear
-        </button>
-        <button className={styles.buttons} onClick={this.trim}>
-          Trim
-        </button>
+        <button className={styles.buttons} onClick={clear}>Clear</button>
+        <button className={styles.buttons} onClick={trim}>Trim</button>
       </div>
       {trimmedDataURL
-        ? <img className={styles.sigImage} alt='signature'
-          src={trimmedDataURL} />
+        ? <img className={styles.sigImage} alt='signature' src={trimmedDataURL} />
         : null}
     </div>
-  }
+  )
 }
 
 createRoot(document.getElementById('container')).render(<App />)

Diff for: example/src/styles.module.css

@@ -19,7 +19,7 @@ body {
   background-color: #fff;
 }
 
-.sigPad {
+.sigCanvas {
   width: 100%;
   height: 100%;
 }

Diff for: package.json

@@ -112,10 +112,5 @@
     "jest-environment-jsdom": {
       "canvas": "$canvas"
     }
-  },
-  "ts-standard": {
-    "ignore": [
-      "example"
-    ]
   }
 }