react-identicons

React component for generating and displaying github-style identicons.

Live demo

tuhnik.github.io/identicon-live (old)

tuhnik.github.io/react-identicons (storybook)

Setup

npm install react-identicons --save

Basic usage

import React from 'react';
import Identicon from 'react-identicons';

const App = () => {
  return <Identicon string="randomness" />;
};
export default App;

Code above should result in the following identicon:

Props

Note: all color values should use hexadecimal notation (i.e. #ebebeb)

• string: (String) Value used for identicon pattern generation.
• size: (Number) Single number to represent width and height of identicon image. Defaults to 400.
• padding (Number) Padding around blocks. Defaults to 0.
• bg (String) Override color for background blocks. Transparent by default.
• fg (String) Override color for foreground blocks. Generated randomly from hash by default.
• palette (Array) Provide an array of colors to be used as foreground block colors.
• count (Number) Block count, can't be higher than 5. Useful for generating smaller (i.e. 3x3 identicons).
• getColor (Function) Callback function which returns current foreground color value.