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.

Property	Type	Default	Description
children	PropTypes.string	''	Text used for hanko label, written either in Japanese or English characters.
className	PropTypes.string	''	CSS class used for custom styling of the hanko ring and text.
color	PropTypes.string	#DD4827	Color of the hanko "ring" and text label
containerStyle	PropTypes.objectOf(PropTypes.string)	{}	Inline style object used for overriding styles of the parent container div.
familyName	PropTypes.string	''	Text of the hanko label (can be used instead of children).
orientation	PropTypes.string	''	Hanko label's text orientation.
ringColor	PropTypes.string	''	Color of the hanko 'ring'
ringSize	PropTypes.number	0	Size of the hanko ring.
rotation	PropTypes.number	0	Rotation (transform) of the hanko text.
size	PropTypes.number.isRequired	undefined	Size (height and width are equal) of the hanko itself.
textStyle	PropTypes.objectOf(PropTypes.string)	{}	Custom style object used to override the default styling of the hanko text.

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!