Skip to main content

React example

On this page you can find the example usage of client in React app.

Install​

Make sure you have the package installed:

npm install autograph-client

Create instance​

Import class from node modules and create new instance. Please notice, we are using useRef hook, to prevent recreation of the instance on every render:

import { useRef } from 'react'
import Autograph from 'autograph-client'

function App() {
  const autograph = useRef(new Autograph())
  // ...
}

In rest of the code we can now refer to the instance as autograph.current.

caution

Autograph client doesn't support SSR due to internal architecture and needs document to be present. If you use SSR, please refer to the documentation of your framework to find out how to run client-side only code, so the instance will be created only in a browser environment.

Render component​

Container element​

Next step is to render the component in DOM. For this we will need a container element ref:

function App() {
  // ...
  const clientContainerRef = useRef(null)
  // ...

  return (
    // ...
    <div ref={clientContainerRef} />
    // ...
  )
}

Rendering in useEffect hook​

The best place to call actual render is in useEffect hook. That would allow you passing parameters to teh client dynamically, render it in selected mode, provide template ID or anything like that:

function App() {
  // ...

  useEffect(() => {
    if (!token || !clientContainerRef.current) return

    const config = {
      apiKey,
      appMode,
      containerElement: clientContainerRef.current,
      signFileId,
      templateId,
      token,
    }

    autograph.current.render(config)

    return () => {
      autograph.current.destroy()
    }
  }, [appMode, token, signFileId, templateId])

  // ...
}

Please notice destroy call in cleanup function. That is required for the client to pickup new properties.

Subscribing to events​

Alongside rendering call you would likely want to subscribe to the client events. That should happen in the same useEffect hook:

function App() {
  // ...

  useEffect(() => {
    // ...

    autograph.current.render(config)

    autograph.current.on('general-success', eventPayload => {
      showToast(eventPayload.messageText)
    })

    // ...
  }, [appMode, token, signFileId, templateId])

  // ...
}

Please refer to Events page for all available events documentation.

Complete example​

This is how the implementation in a single-file app would look like:

import React, { useEffect, useRef, useState } from 'react'
import Autograph from 'autograph-client'

function App() {
  // User token generation is out of scope
  const token = getUserToken()
  const apiKey = 'your-autograph-api-key'

  // Please take care of setting this if using "sign" app mode
  const [signFileId, setSignFileId] = useState('')
  // or this if using "prepareDocumentWithTemplate" one.
  const [templateId, setTemplateId] = useState('')

  const [appMode, setAppMode] = useState('prepareDocument')

  const autograph = useRef(new Autograph())

  const clientContainerRef = useRef(null)

  function logout() {
    setToken('')
    setAppMode(null)
    autograph.current?.destroy()
  }

  function showToast(message = '', isError = false) {
    // toast implementation
  }

  useEffect(() => {
    if (!token || !clientContainerRef.current) return

    if (!appMode) {
      autograph.current.destroy()

      return
    }

    autograph.current.render({
      apiKey,
      appMode,
      containerElement: clientContainerRef.current,
      signFileId,
      templateId,
      token,
    })

    autograph.current.on('document-prepared', () => {
      showToast('Document prepared!')
    })

    autograph.current.on('document-signed', () => {
      showToast('Document signed!')
    })

    autograph.current.on('template-prepared', () => {
      showToast('Template prepared!')
    })

    autograph.current.on('general-error', eventPayload => {
      showToast(eventPayload.messageText, true)
    })

    autograph.current.on('general-exit', () => {
      showToast('General exit')
      setAppMode(null)
    })

    autograph.current.on('general-success', eventPayload => {
      showToast(eventPayload.messageText)
    })

    autograph.current.on('auth-error', () => {
      showToast('Authentication error', true)
      logout()
    })

    return () => {
      autograph.current.destroy()
    }
  }, [appMode, token, signFileId, templateId])

  return (
    <div className="App">
      <div className="client-parent-container" ref={clientContainerRef} />
    </div>
  )
}