@anvilco/react-signature-modal

AnvilSignatureModal

A lightweight modal component that handles the Anvil Etch signing lifecycle. Compatible with mobile viewports with minimal dependencies.

Usage

yarn add @anvilco/react-signature-modal

npm install @anvilco/react-signature-modal

import AnvilSignatureFrame from '@anvilco/react-signature-modal'
import '@anvilco/react-signature-modal/dist/styles.css'

<AnvilSignatureModal
  signURL={signURL}
  isOpen={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  onLoad={() => setLoading(false)}
  onFinish={(redirectURL) => window.location.assign(redirectURL)}
  width={800}
  height={1000}
/>

Props

signURL

string (required)

A URL to the Anvil signature page generated from the generateEtchSignURL GraphQL mutation. The signature frame will be displaying the signing page through this URL.

Example:

signURL={`https://app.useanvil.com/etch/8iJDbq8dkEmjrsNw7Dnb/sign?token=dsa...`}

isOpen

boolean

The modal is displayed if isOpen is true.

onClose

function

This function is called when the X button is clicked on the top right corner.

Example:

onClose={() => setIsOpen(false))}

onLoad

function

This function is called when the signing page has finished loading.

Example:

onLoad={() => setLoading(false)}

onFinish

function

This function takes the redirectURL as a parameter; called when a user has finished signing.

Example: This is called by default if not defined otherwise.

onFinish={(redirectURL) => window.location.assign(redirectURL)}

width | height

number | string

The width/height of the iframe in CSS pixels. Default is 900w by 1100h.

Styling

Styles are not embedded into the React component to support customization. The default styles are provided within the modules under dist/styles.css.

Anvil Etch E-Sign Docs

Read the Docs

Notes

• The allowFormEmbed config must be set to true under your Anvil organization for embedded signing. Please reach us at [e-mail].
• React ^v16.8.0 is required.

Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

Questions or Feedback

Please email us at [e-mail].