@anvilco/react-signature-frame

AnvilSignatureFrame

A minimal component that handles the Anvil Etch signing lifecycle.

Usage

yarn add @anvilco/react-signature-frame

npm install @anvilco/react-signature-frame

import AnvilSignatureFrame from '@anvilco/react-signature-frame'

<AnvilSignatureFrame
  signURL={signURL}
  scroll="smooth"
  onLoad={() => setLoading(true)}
  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...`}

scroll

string | null

• auto - scrolls the window to the signing frame when mounted
• smooth - smoothly scrolls the window to the signing frame when mounted
• null - disables scrolling

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

enableDefaultStyles

boolean (default: true)

Set to false to disable the default inline styles of the component.

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

Styling

Customize the component by overriding the default styles. Pass in props to override IDs and classNames.

Anvil Etch E-Sign Docs

Read the Docs

Links 🔗

• @anvilco/react-signature-frame
• 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].