})}
);
}
```
## Render Path
```jsx mdx:preview
import React, { useRef } from "react";
import Signature from '@uiw/react-signature';
const points = {
"path-1": [[83.52734375,63.6015625],[83.22265625,64.02734375],[81.86328125,66.0390625],[78.69140625,70.90625],[72.76171875,80.44140625],[67.01171875,91.421875],[64.5390625,98.19921875],[63.83203125,101.25390625],[63.640625,102.5078125],[63.62109375,102.7109375],[63.96484375,102.22265625],[64.890625,100.87890625],[66.3671875,98.515625]],
"path-2": [[116.5546875,65.8359375],[117.3125,65.8359375],[119.23046875,65.90625],[122.078125,66.39453125],[125.44140625,67.51171875],[128.33203125,69.2421875],[130.6484375,71.53515625],[131.94140625,73.6796875],[132.28125,75.65234375],[132.0625,77.5],[130.33203125,79.78125],[126.4921875,83.24609375],[120.9375,87.5234375],[114.859375,91.13671875],[108.09765625,93.66796875],[101.8359375,94.7734375],[96.26953125,94.7734375],[92.23828125,94.90625],[89.94921875,94.96484375],[88.234375,95.04296875],[88.03515625,95.08984375],[89.6015625,95.4296875],[94.75,96.640625],[107.55859375,98.640625],[123.6171875,100.09375],[135.5546875,100.734375],[141.140625,101.03515625],[142.2578125,101.08984375]]
}
export default function App() {
const $svg = useRef(null);
const handle = (evn) => $svg.current?.clear();
return (
<>
{
if (keyName === 'path-1' || index === 0) {
return
}
if (keyName === 'path-2' || index === 1) {
return
}
}}
/>
);
}
```
## Stroke
```jsx mdx:preview
import React, { useRef } from "react";
import Signature from '@uiw/react-signature';
const points = {
"path-1": [[83.52734375,63.6015625],[83.22265625,64.02734375],[81.86328125,66.0390625],[78.69140625,70.90625],[72.76171875,80.44140625],[67.01171875,91.421875],[64.5390625,98.19921875],[63.83203125,101.25390625],[63.640625,102.5078125],[63.62109375,102.7109375],[63.96484375,102.22265625],[64.890625,100.87890625],[66.3671875,98.515625]],
"path-2": [[116.5546875,65.8359375],[117.3125,65.8359375],[119.23046875,65.90625],[122.078125,66.39453125],[125.44140625,67.51171875],[128.33203125,69.2421875],[130.6484375,71.53515625],[131.94140625,73.6796875],[132.28125,75.65234375],[132.0625,77.5],[130.33203125,79.78125],[126.4921875,83.24609375],[120.9375,87.5234375],[114.859375,91.13671875],[108.09765625,93.66796875],[101.8359375,94.7734375],[96.26953125,94.7734375],[92.23828125,94.90625],[89.94921875,94.96484375],[88.234375,95.04296875],[88.03515625,95.08984375],[89.6015625,95.4296875],[94.75,96.640625],[107.55859375,98.640625],[123.6171875,100.09375],[135.5546875,100.734375],[141.140625,101.03515625],[142.2578125,101.08984375]]
}
export default function App() {
const $svg = useRef(null);
const handle = (evn) => $svg.current?.clear();
return (
<>
{
return (
<>
)
}}
/>
);
}
```
## Props
```ts
import React from 'react';
import { type StrokeOptions } from 'perfect-freehand';
import { type Dispatch } from '@uiw/react-signature';
export interface SignatureProps extends React.SVGProps {
prefixCls?: string;
options?: StrokeOptions;
readonly?: boolean;
defaultPoints?: Record;
renderPath?: (d: string, keyName: string, point: number[][], index: number, container: SVGSVGElement) => JSX.Element;
onPointer?: (points: number[][]) => void;
}
export type SignatureRef = {
svg: SVGSVGElement | null;
dispatch: Dispatch;
clear: () => void;
};
export default function Signature(props?: SignatureProps): React.JSX.Element;
```
## Canvas Props
**Experimental** components props
```ts
import React from 'react';
import { type StrokeOptions } from 'perfect-freehand';
import { type Dispatch } from '@uiw/react-signature/esm/store';
export * from 'perfect-freehand';
export * from '@uiw/react-signature/esm/utils';
export * from '@uiw/react-signature/esm/options';
export * from '@uiw/react-signature/esm/store';
export interface SignatureProps extends React.CanvasHTMLAttributes {
prefixCls?: string;
options?: StrokeOptions;
readonly?: boolean;
defaultPoints?: Record;
onPointer?: (points: number[][]) => void;
}
export type SignatureCanvasRef = {
canvas: HTMLCanvasElement | null;
dispatch: Dispatch;
clear: () => void;
};
const Signature: React.ForwardRefExoticComponent>;
export default Signature;
```
### Options
The options object is optional, as are each of its properties.
| Property | Type | Default | Description |
| ------------------ | -------- | ------- | ----------------------------------------------------- |
| `size` | number | 8 | The base size (diameter) of the stroke. |
| `thinning` | number | .5 | The effect of pressure on the stroke's size. |
| `smoothing` | number | .5 | How much to soften the stroke's edges. |
| `streamline` | number | .5 | How much to streamline the stroke. |
| `simulatePressure` | boolean | true | Whether to simulate pressure based on velocity. |
| `easing` | function | t => t | An easing function to apply to each point's pressure. |
| `start` | { } | | Tapering options for the start of the line. |
| `end` | { } | | Tapering options for the end of the line. |
| `last` | boolean | false | Whether the stroke is complete. |
**Note:** When the `last` property is `true`, the line's end will be drawn at the last input point, rather than slightly behind it.
The `start` and `end` options accept an object:
| Property | Type | Default | Description |
| -------- | ----------------- | ------- | ---------------------------------------------------------------------------------------- |
| `cap` | boolean | true | Whether to draw a cap. |
| `taper` | number or boolean | 0 | The distance to taper. If set to true, the taper will be the total length of the stroke. |
| `easing` | function | t => t | An easing function for the tapering effect. |
**Note:** The `cap` property has no effect when `taper` is more than zero.
```js
t,
simulatePressure: true,
last: true,
start: {
cap: true,
taper: 0,
easing: (t) => t,
},
end: {
cap: true,
taper: 0,
easing: (t) => t,
},
}}
/>
```
> **Tip:** To create a stroke with a steady line, set the `thinning` option to `0`.
> **Tip:** To create a stroke that gets thinner with pressure instead of thicker, use a negative number for the `thinning` option.
## Development
1. Dependencies in the installation package and example
```bash
npm run install
```
2. To develop, run the self-reloading build:
```bash
npm run build # Compile packages 📦 @uiw/react-signature
npm run watch # Real-time compilation 📦 @uiw/react-signature
```
3. Run Document Website Environment:
```bash
npm run start
```
4. To contribute, please fork repos, add your patch and tests for it (in the `test/` folder) and submit a pull request.
```
npm run test
```
## Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.