# Embedded Signature Maker (React)

This component allows you to seamlessly add drawing signature functionality to your website or mobile app. It supports [JS+HTML](https://github.com/docusealco/signature-maker-js), [Vue](https://github.com/docusealco/signature-maker-vue) and [React](https://github.com/docusealco/signature-maker-react).

## Example code

```jsx
import React from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  return (
    <div className="app">
      <SignatureMaker
        onSave={(data) => console.log(data)}
        onChange={(data) => console.log(data)}
      />
    </div>
  );
}
```

## Attributes

| Attribute | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| downloadOnSave | boolean | No | `false` | Set `false` to disable downloading the signature image on save. It's useful when you want to handle the image data yourself. |
| withTyped | boolean | No | `true` | Set `false` to disable text signature input panel. |
| withDrawn | boolean | No | `true` | Set `false` to disable drawing signature panel. |
| withUpload | boolean | No | `true` | Set `false` to disable uploading signature image panel. |
| withColorSelect | boolean | No | `true` | Set `false` to disable color selection. Only black color will be available. |
| withSubmit | boolean | No | `true` | Set `false` to disable the submit button. Any changes will be available as a base64 string in the `change` event. Custom event 'save' will be triggered on clicking the submit button. |
| saveButtonText | string | No | `Submit` |  |
| controlButtonsContainerClass | string | No |  | Custom CSS class for the control buttons container. Example: `flex gap-2` |
| controlButtonsContainerStyle | string | No | `display: flex; align-items: center; justify-content: space-between; text-align: center; margin: 1rem 0;` | Custom CSS styles for the control buttons container. Default CSS styles will be disabled |
| saveButtonClass | string | No |  | Custom CSS class for the save button Example: `btn btn-neutral text-white text-base w-full` |
| saveButtonStyle | string | No | `color: #ffffff; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; padding: 0px 16px; text-transform: uppercase; background-color: #222222; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; text-decoration-line: none; width: 100%; border: 1px solid #222222;` | Custom CSS styles for the save button |
| saveButtonDisabledClass | string | No |  | Custom CSS class for the disabled save button. Example: `btn-disabled` |
| saveButtonDisabledStyle | string | No | `background-color: #D3D3D3; color: #808080; cursor: not-allowed; border: 0;` | Custom CSS styles for the disabled save button. |
| undoButtonText | string | No | `Undo` |  |
| undoButtonClass | string | No |  | Custom CSS class for the undo button. Example: `btn btn-outline btn-sm font-medium` |
| undoButtonStyle | string | No | `color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;` | Custom CSS styles for the undo button. |
| clearButtonText | string | No | `Clear` | Custom text for the clear button. |
| clearButtonClass | string | No |  | Custom CSS class for the clear button. Example: `btn btn-outline btn-sm font-medium` |
| clearButtonStyle | string | No | `color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;` | Custom CSS styles for the clear button. |
| textInputPlaceholder | string | No | `Type signature here` | Custom placeholder text for the text input field. |
| textInputClass | string | No |  | Custom CSS class for the text input field. Example: `input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl` |
| textInputStyle | string | No | `color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; margin: 0px 0px 16px; padding: 0px 16px; background-color: #ffffff; border-radius: 8px; flex-shrink: 1; height: 56px; outline: #222222 none 0px; outline-offset: 0px; width: 100%; text-align: start; border: 1px solid #D3D3D3;` | Custom CSS styles for the text input field. |
| canvasClass | string | No |  | Custom CSS class for the canvas element. Example: `bg-white border border-base-300 rounded-2xl w-full` |
| canvasStyle | string | No | `display: block; vertical-align: middle; width: 100%; border-radius: 8px; background-color: #ffffff; padding: 1px; touch-action: none; user-select: none; text-align: center; line-height: 24px; border: 1px solid #D3D3D3;` | Custom CSS styles for the canvas element. |
| typeButtonsContainerClass | string | No |  | Custom CSS class for the type buttons container. Example: `flex gap-2 mb-4 justify-center` |
| typeButtonsContainerStyle | string | No | `margin-bottom: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem;` | Custom CSS styles for the type buttons container. |
| drawTypeButtonText | string | No | `Draw` | Custom text for the draw type button. |
| drawTypeButtonClass | string | No |  | Custom CSS class for the draw type button. Example: `flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold` |
| drawTypeButtonStyle | string | No | `color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;` | Custom CSS styles for the draw type button. |
| drawTypeButtonActiveClass | string | No |  | Custom CSS class for the active draw type button. Example: `bg-neutral text-white font-semibold` |
| drawTypeButtonActiveStyle | string | No | `color: #fff; background-color: #222222; font-weight: 500;` | Custom CSS styles for the active draw type button. |
| textTypeButtonText | string | No | `Type` | Custom text for the text type button. |
| textTypeButtonClass | string | No |  | Custom CSS class for the text type button. Example: `flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold` |
| textTypeButtonStyle | string | No | `color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;` | Custom CSS styles for the text type button. |
| textTypeButtonActiveClass | string | No |  | Custom CSS class for the active text type button. Example: `bg-neutral text-white font-semibold` |
| textTypeButtonActiveStyle | string | No | `color: #fff; background-color: #222222; font-weight: 500;` | Custom CSS styles for the active text type button. |
| uploadTypeButtonText | string | No | `Upload` | Custom text for the upload type button. |
| uploadTypeButtonClass | string | No |  | Custom CSS class for the upload type button. Example: `flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold` |
| uploadTypeButtonStyle | string | No | `color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;` | Custom CSS styles for the upload type button. |
| uploadTypeButtonActiveClass | string | No |  | Custom CSS class for the active upload type button. Example: `bg-neutral text-white font-semibold` |
| uploadTypeButtonActiveStyle | string | No | `color: #fff; background-color: #222222; font-weight: 500;` | Custom CSS styles for the active upload type button. |
| fontUrl | string | No | `https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff` | Custom font URL to be used for the text signature input panel. |

## Callbacks

| Callback | Description |
| --- | --- |
| onChange | Function to be called when changes are made to the signature. Example: `(data) => { console.log(data) }` |
| onSave | Function to be called on saving changes of the signature. withSubmit attribute should be enabled to trigger this function. Example: `(data) => { console.log(data) }` |

## Other frameworks

- [JavaScript](https://www.docuseal.com/docs/embedded/signature/js.md)
- [Vue](https://www.docuseal.com/docs/embedded/signature/vue.md)

## Other embedded components

- [Embedded Signing Form](https://www.docuseal.com/docs/embedded/form/react.md)
- [Embedded Form Builder](https://www.docuseal.com/docs/embedded/builder/react.md)