
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
@anvilco/react-signature-modal
Advanced tools
The AnvilSignatureModal React component for embedded Etch signatures
A lightweight modal component that allows embedding Anvil Etch e-signatures via a modal popup in your app. It will give you information via callbacks through the signing process lifecycle. Compatible with mobile viewports with minimal dependencies.
See the live demo and open-source demo repository for a usage example.
Anvil provides easy APIs for all things paperwork.
Learn more on our Anvil developer page.
yarn add @anvilco/react-signature-modal
npm install @anvilco/react-signature-modal
import AnvilSignatureModal from '@anvilco/react-signature-modal'
import '@anvilco/react-signature-modal/dist/styles.css'
<AnvilSignatureModal
iframeURL={iframeURL}
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onLoad={() => setLoading(false)}
onEvent={(eventObject) => {
console.log(eventObject)
// See https://www.useanvil.com/docs/api/e-signatures/#iframe-event-details
// for all event details.
//
// Example:
//
// {
// action: 'signerComplete',
// signerStatus: 'completed',
// signerEid: 'Jc1ZJisPnpF5lHyfyqBW',
// nextSignerEid: 'WBqyfyHl5FpnPsiJZ1cJ',
// documentGroupStatus: 'partial',
// documentGroupEid: 'nEKq2eGim0ijSqKd98nG',
// etchPacketEid: 'XzfmVPfGUEyBc1XyylFo',
// }
}}
/>
As of v2.0, the AnvilSignatureModal
now uses AnvilEmbedFrame
under the hood. The props have changed slightly:
signURL
-> iframeURL
onFinishSigning
-> onEvent
. Check the eventObject.action === 'signerComplete'
to detect a signer has finished signingonError
-> onEvent
. Check the eventObject.error
to determine if there is an error// v1.x
<AnvilSignatureModal
// Changed props, see below
signURL={signURL}
onFinishSigning={(eventObject) => console.log(eventObject)}
onError={(eventObject) => console.log(eventObject)}
// Unchanged!
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onLoad={() => setLoading(false)}
/>
// v2.x
<AnvilSignatureModal
// New
iframeURL={iframeURL}
onEvent={(eventObject) => {
console.log(eventObject)
if (eventObject.action === 'signerComplete') {
// Signer has finished signing
} else if (eventObject.error) {
// There has been an error
}
}}
// Unchanged!
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onLoad={() => setLoading(false)}
/>
string - html id attribute, overriding the id
will also remove all default styling for the react-siganture-modal
. If you just want to override specific styling elements use the anvilFrameProps
below.
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:
iframeURL={`https://app.useanvil.com/etch/8iJDbq8dkEmjrsNw7Dnb/sign?token=dsa...`}
boolean - The modal is displayed if isOpen
is true.
function - This function is called when the X button is clicked on the top right corner.
Example:
onClose={() => setIsOpen(false))}
function - A callback function with payload
as a parameter. It is called when a user has successfully finished signing.
Example:
onEvent={(eventObject) => console.log(eventObject)}
/*
{
action: "signerComplete",
signerEid: "kJzR6mcIWKoZs6KOxV4w",
signerStatus: "completed",
nextSignerEid: "HRLhx4khticpfxsUFSpj",
documentGroupEid: "9fQnvfy51p7oKrEYajMh",
documentGroupStatus: "partial",
etchPacketEid: "J1phQTO6WQH6gZcMJAG5", // If from an EtchPacket
weldDataEid: "J1phQTO6WQH6gZcMJAG5", // If from a workflow
}
*/
See our e-sign docs for full details on all iframe events.
onEvent
is also called when a user experiences an error while attempting to sign. See the docs for details on how to recover from errors.
Example error payload:
{
action: "signerError",
errorType: "tokenExpired", tokenExpired || tokenInvalid || notFound
error: "Token Expired",
message: "Error specific message",
signerEid: "kJzR6mcIWKoZs6KOxV4w",
// depending on the errorType, you may or may not receive the following
signerStatus: "sent",
nextSignerEid: "HRLhx4khticpfxsUFSpj",
documentGroupEid: "9fQnvfy51p7oKrEYajMh",
documentGroupStatus: "sent",
etchPacketEid: "J1phQTO6WQH6gZcMJAG5", // If from an EtchPacket
weldDataEid: "J1phQTO6WQH6gZcMJAG5", // If from a workflow
}
function - This function is called when the signing page has finished loading.
Example:
onLoad={() => setLoading(false)}
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
boolean -Show the close icon on the top right of the modal if true.
object - Pass in custom props into the paragraph tag displayed if the user's browser does not support iframes.
Example:
iframeWarningProps={{ className: 'warning-text' }}
object - Pass in custom props into the iframe tag displayed within the modal.
Example:
anvilFrameProps={{
style: { background: 'white' },
}}
object - Pass in custom props into the svg tag for the delete button displayed within the modal.
Example:
iconCloseProps={{ className: 'red-delete-button' }}
Customize the component by importing your own CSS stylesheet. Override IDs or classNames by passing them in as props.
Please file an issue for bugs, missing documentation, or unexpected behavior.
Please email us at support@useanvil.com.
FAQs
The AnvilSignatureModal React component for embedded Etch signatures
The npm package @anvilco/react-signature-modal receives a total of 2,612 weekly downloads. As such, @anvilco/react-signature-modal popularity was classified as popular.
We found that @anvilco/react-signature-modal demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.