@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)}
/>

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)}

modalAppElement

string

Pass in a query selector identifying the root of your app. Used to hide other page content while the modal is open for screenreaders and other accessibility purposes.

Default: #root

showIconClose

boolean

Show the close icon on the top right of the modal if true.

iframeWarningProps

object

Pass in custom props into the paragraph tag displayed if the user's browser does not support iframes.

Example:

iframeWarningProps={{ className: 'warning-text' }}

AnvilFrameProps

object

Pass in custom props into the iframe tag displayed within the modal.

Example:

AnvilFrameProps={{
  id: 'my-modal',
  style: { background: 'white' },
}}

iconCloseProps

object

Pass in custom props into the svg tag for the delete button displayed within the modal.

Example:

AnvilFrameProps={{ className: 'custom-delete-class' }}

Styling

Customize the component by importing your own CSS stylesheet. Override IDs or classNames by passing them in as props.

Anvil Etch E-Sign Docs

Read the Docs

Links 🔗

• @anvilco/react-signature-modal
• Get started with Anvil

Notes

• Please contact us at [e-mail] to enable iframe embedded signing for production signature packets.
• React >= v16.0 required.

Bugs

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

Questions or Feedback

Please email us at [e-mail].