DocuSeal React Components

📙 Documentation | 💻 Examples | 🚀 Demo App

This package provides a convenient way to embed DocuSeal into React apps. Sign documents and create document forms directly in your apps.

Embedded Signing Form

Embedded Form Builder

Installation

npm install @docuseal/react

Documentation

For detailed documentation, please click here.

Usage

Signing Form

Copy public DocuSeal form URL from https://docuseal.com and use it in the src component prop:

importReactfrom"react"import{DocusealForm}from'@docuseal/react'exportfunctionApp(){return(<divclassName="app"><DocusealFormsrc="https://docuseal.com/d/LEVGR9rhZYf86M"email="signer@example.com"/></div>);}

Form Builder

React Client Render

importReact,{useEffect,useState}from'react'import{DocusealBuilder}from'@docuseal/react'exportfunctionApp(){const[token,setToken]=useState()useEffect(()=>{fetch('/api/docuseal/builder_token',{method: 'POST'}).then(async(resp)=>{constdata=awaitresp.json()setToken(data.token)})},[]);return(<divclassName="app">{token&&<DocusealBuildertoken={token}/>}</div>);}

To protect the template builder from unathorized access a secure token (JWT) should be generated on the back-end:

constexpress=require('express');constjwt=require('jsonwebtoken');constapp=express();app.post('/api/docuseal/builder_token',(req,res)=>{consttoken=jwt.sign({user_email: 'your-docuseal-user-email@company.com',integration_email: 'customer@example.com',// replace with current user emailname: 'Integration W-9 Test Form',document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],},process.env.DOCUSEAL_TOKEN);res.json({ token });});app.listen(8080,()=>{console.log(`Server is running`);});

Obtain secret API token (DOCUSEAL_TOKEN env variable) to sign JWT from https://console.docuseal.com/api.

Find Express.js example project here.

Next.js SSR

importjwtfrom'jsonwebtoken';import{DocusealBuilder}from'@docuseal/react'exportdefaultfunctionHome(){consttoken=jwt.sign({user_email: process.env.DOCUSEAL_USER_EMAIL,integration_email: 'test@example.com',name: 'Integration W-9 Test Form',document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],},process.env.DOCUSEAL_TOKEN);return(<div><h1>Docuseal Builder</h1><DocusealBuildertoken={token}/></div>);}

Find Next.js example project here.

License

MIT