Smooth Signature Board Component For React

Description:

A customizable, smooth signature pad component for React applications.

How to use it:

1. Install and import the react-signature component.

# NPM
$ npm install react-signature

import React, { useRef } from "react";
import Signature from '@uiw/react-signature';

2. Add the signature pad to your app.

export default function App() {
  const $svg = useRef(null);
  const handle = (evn) => $svg.current?.clear();
  return (
    <>
      <Signature ref={$svg} />
      <button onClick={handle}>Clear</button>
    </>
  );
}

3. Available component props.

prefixCls?: string;
options?: StrokeOptions;
readonly?: boolean;
defaultPoints?: Record<string, number[][]>;
renderPath?: (d: string, keyName: string, point: number[][], index: number, container: SVGSVGElement) => JSX.Element;
onPointer?: (points: number[][]) => void;

4. Available options.

size: 6,
smoothing: 0.46,
thinning: 0.73,
streamline: 0.5,
easing: (t) => t,
start: {
  taper: 0,
  easing: (t) => t,
  cap: true,
},
end: {
  taper: 0,
  easing: (t) => t,
  cap: true,
},

Preview: