Package Exports

@anvilco/react-signature-frame

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@anvilco/react-signature-frame) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 🔗

Notes

Please contact us at support@useanvil.com 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 hello@useanvil.com.