SnowSign Editor React SDK

React and Next.js field placement SDK for external ERP/groupware integrations.

The SDK does not store or receive SnowSign API keys. Your server should create an upload session with POST /public/v1/uploads, receive the exported payload, and call SnowSign Public API from the server.

For preview, pass either pdfFile from a browser file input or pdfUrl from your own preview endpoint. When pdfFile is used, the SDK creates and revokes the browser object URL internally.

Install

npm install @jtsnowball/snowsign-editor-react

React

import { SnowSignFieldEditor } from '@jtsnowball/snowsign-editor-react';
import '@jtsnowball/snowsign-editor-react/style.css';

function createMultipartRequest(payload: unknown, pdfFile?: File) {
  if (!pdfFile) throw new Error('PDF file is required.');
  const formData = new FormData();
  formData.append('payload', JSON.stringify(payload));
  formData.append('file', pdfFile);
  return formData;
}

<SnowSignFieldEditor
  pdfFile={pdfFile}
  participants={['근로자']}
  onSubmit={async (payload, { pdfFile }) => {
    // Your ERP server creates the SnowSign upload session, uploads pdfFile,
    // and calls the contract creation API with document_upload_id.
    return fetch('/erp/snowsign/contracts', {
      method: 'POST',
      body: createMultipartRequest(payload, pdfFile),
    });
  }}
/>;

DOM Mount

<div id="snowsign-editor"></div>
<script type="module">
  import { mount } from '@jtsnowball/snowsign-editor-react';
  import '@jtsnowball/snowsign-editor-react/style.css';

  function createMultipartRequest(payload, pdfFile) {
    if (!pdfFile) throw new Error('PDF file is required.');
    const formData = new FormData();
    formData.append('payload', JSON.stringify(payload));
    formData.append('file', pdfFile);
    return formData;
  }

  const editor = mount('#snowsign-editor', {
    pdfFile,
    participants,
    onSubmit(payload, { pdfFile }) {
      return fetch('/erp/snowsign/contracts', {
        method: 'POST',
        body: createMultipartRequest(payload, pdfFile),
      });
    },
  });
</script>

Build

npm run build

Publish

The editor packages depend on @jtsnowball/snowsign-signature-fields-core, so publish the core package first.

cd ../../packages/snowsign-signature-fields-core
npm publish --access public

cd ../../sdk/snowsign-editor-react
npm publish --access public

cd ../snowsign-editor
npm publish --access public