Blockatars

React library for generating unique visual hashes. Every small change in seed will generate a vastly different image.

Blockatars internally uses the same system for generating colors as blockies, this was done to preserve some visual compatibility between library that's already widely used. Though, the color distribution may be (and likely will be) different.

Demo / Website

Usage

Install the NPM package

npm install blockatars

Use the Avatar component in your code

import { Avatar } from 'blockatar';

export const Component = () => {
  return (
    <Avatar
      seed="0x0......000" 
      size={24}
    />
  )
}

Reference

| Name | Required | Type | Description | | --- | --- | --- | --- | | seed | ✓ | string | Any string to be used as a seed for the visual hashing | | size | ✓ | number | Size of the SVG element in pixels | | disableLowerCase | | boolean | Any value passed into the seed is lower-cased. This option disables that behaviour | | disableNoise | | boolean | Disables the noise that's by default applied to the avatar | | disableBlur | | boolean | Disables the blur that's by default applied to the avatar (⚠️ this generates a vastly different-looking avatar) |

As seen on

| | | --- |

Are you using Blockatars? Create an issue, and your company logo might make it here!

License

React Tree List is licensed under the MIT License.

Authors

Ondřej Bárta · GitHub · website · twitter