npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@docuseal/signature-maker-react

v1.0.2

Published

React component for drawing signatures

Downloads

48

Readme

Signature Maker React

Signature Maker is a React component that lets users draw or type their signature.

Other implementations

Demo

Try the live demo here

Documentation

Check out the full documentation here.

Installation

npm install @docuseal/signature-maker-react

OR

yarn add @docuseal/signature-maker-react

Usage

Basic Usage with standard styles and default signature saving behavior:

import React from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  return (
    <div className="app">
      <SignatureMaker downloadOnSave={true} />
    </div>
  );
}

Usage with default styles but custom signature saving behavior, such as uploading the signature to a server:

import React from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  const handleSave = (event) => {
    fetch('/save-signature', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ file: event.base64 }),
    });
  }

  return (
    <div className="app">
      <SignatureMaker onSave={handleSave} />
    </div>
  );
}

Usage without a save signature button, embedded in another form. The signature will be stored in a form field named signature:

import React, { useState } from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  const [signatureBase64, setSignatureBase64] = useState(null);

  const handleSignatureChange = (event) => {
    setSignatureBase64(event.base64);
  }

  const handleSubmit = (event) => {
    fetch('/submit-form', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: event.target.name.value,
        signature: signatureBase64
      }),
    });
  }

  return (
    <div className="app">
      <form id="myForm" onSubmit={handleSubmit}>
        <input name="name" type="text" />
        <SignatureMaker
          withSubmit={false}
          onChange={handleSignatureChange}
        >
        </SignatureMaker>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Usage without a save signature button and tracking each signature change:

import React from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  const handleChange = (event) => {
    if (event.base64) {
      fetch('/background-save-signature', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ file: event.base64 }),
      });
    } else {
      console.log('No signature to save');
    }
  }

  return (
    <div className="app">
      <SignatureMaker
        withSubmit={false}
        onChange={handleChange}
      />
    </div>
  );
}

Usage with custom button labels and classes (DaisyUI):

import React from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  return (
    <div className="app">
      <SignatureMaker
        className="block my-8"
        saveButtonText="Télécharger"
        undoButtonText="Annuler"
        clearButtonText="Clair"
        drawTypeButtonText="Dessiner"
        textTypeButtonText="Type"
        uploadTypeButtonText="Télécharger"
        textInputPlaceholder="Tapez votre signature ici"
        typeButtonsContainerClass="flex gap-2 mb-4 justify-center"
        drawTypeButtonClass="flex items center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
        drawTypeButtonActiveClass="bg-neutral text-white font-semibold"
        textTypeButtonClass="flex items center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
        textTypeButtonActiveClass="bg-neutral text-white font-semibold"
        uploadTypeButtonClass="flex items center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
        uploadTypeButtonActiveClass="bg-neutral text-white font-semibold"
        textInputClass="input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl"
        canvasClass="bg-white border border-base-300 rounded-2xl w-full"
        undoButtonClass="btn btn-outline btn-sm font-medium"
        clearButtonClass="btn btn-outline btn-sm font-medium"
        saveButtonClass="btn btn-neutral text-white text-base w-full"
      />
    </div>
  );
}

Usage with customization of certain elements using CSS classes and styles:

import React from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  return (
    <div className="app">
      <SignatureMaker
        saveButtonClass="btn btn-neutral text-white text-base w-full"
        canvasClass="bg-white border border-base-300 rounded-2xl w-full"
        canvasStyle="border: 2px solid #000;"
      />
    </div>
  );
}

Customization

Signature Maker can be customized with the following attributes:

downloadOnSave
withTyped
withDrawn
withUpload
withColorSelect
withSubmit
controlButtonsContainerClass
controlButtonsContainerStyle
saveButtonText
saveButtonClass
saveButtonStyle
saveButtonDisabledClass
saveButtonsDisabledStyle
undoButtonText
undoButtonClass
undoButtonStyle
clearButtonText
clearButtonClass
clearButtonStyle
textInputPlaceholder
textInputClass
textInputStyle
canvasClass
canvasStyle
typeButtonsContainerClass
typeButtonsContainerStyle
drawTypeButtonText
drawTypeButtonClass
drawTypeButtonStyle
drawTypeButtonActiveClass
drawTypeButtonActiveStyle
textTypeButtonText
textTypeButtonClass
textTypeButtonStyle
textTypeButtonActiveClass
textTypeButtonActiveStyle
uploadTypeButtonText
uploadTypeButtonClass
uploadTypeButtonStyle
uploadTypeButtonActiveClass
uploadTypeButtonActiveStyle
fontUrl
onSave
onChange

The full documentation with detailed configuration and event descriptions can be found here.

License

MIT