A React component for rendering hanko (Japanese name seals)

Usage no npm install needed!

<script type="module">
  import reactHanko from '';


react-hanko logo


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


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




  • 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


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 (

Running the Example Project

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


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.




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.