react-hanko

A UI component to render Japanese hanko. Use it to add flair and realism to forms, digital contracts and signatures. 💮

han·ko

A Japanese stamp made of wood, stone, or horn, engraved with the name of an individual, office, or institution and used instead of a signature in official transactions.

- The Free Dictionary

Demo

Features

• Japanese and English support
• Conveniently sets font size and other properties via a provided size prop.
• Customizable:
  • Text inside a hanko can have either a vertical or horizontal orientation
  • Text can be rotated left or right (e.g. -24 degrees)
  • The color of the text or the outer "ring" may be set separately
  • Adjust the width of the hanko "ring" (i.e. the outer circle)
  • Use your own custom inline styles to override the default CSS styling

Getting Started

Installation

You can install react-hanko from npm.

$ npm install react-hanko

Quick Example

Here is a quick example to get you started.

import React, { Component } from 'react';
import { Hanko } from 'react-hanko';
 
class MyComponent extends Component {
  render() {
    return (
      <Hanko
        familyName="鈴木"
        size={100}
      />
    );
  }
}

Running the Example Project

Run npm start in the terminal, and access the page at http://localhost:3000 in your browser of choice.

Props

These are the available properties to customize react-hanko.

Important: the size prop is required, as well as text provided either by familyName or children.

ChangeLog

See CHANGELOG.md

Contribution

Thanks for checking out react-hanko. Bugs, feature requests and comments are more than welcome in the issues.

Before opening a PR:

Run npm test after making changes, provide documentation and please be mindful of the code style.

Thanks!