| Statements | Branches | Functions | Lines | | --------------------------- | ----------------------- | ------------------------- | ----------------- | | | | | |

react-metamask-avatar

🎭 A React component for rendering MetaMask-style Jazzicon avatars based on Ethereum account address.

Features ✨

• Deterministic - Same address always generates the same avatar
• TypeScript-First - Full type definitions included
• Customizable - Control size, styling via props or CSS
• Lightweight - Minimal bundle impact

Overview 🧐

The MetaMaskAvatar component is a React functional component that takes in a required address property of type string and an optional size property of type number. It returns an image avatar of the given Ethereum address provided as a string and renders it within an AvatarWrapper component, which can be styled using the className property.

Demo 😈

Hosted storybook

Installation 📦

npm

npm install react-metamask-avatar @metamask/jazzicon

yarn

yarn add react-metamask-avatar @metamask/jazzicon

pnpm

pnpm add react-metamask-avatar @metamask/jazzicon

Note: @metamask/jazzicon is a peer dependency.

Props ℹ️

address

The required address property is a string of length 42 that represents an Ethereum address. If it is not provided or does not meet the expected length, the component returns null.

size

The optional size property is a number that sets the size of the avatar image in pixels. If not provided, it defaults to 24.

className

The optional className property is a string that allows for custom styling via CSS classes.

style

The optional style property is a React.CSSProperties object that allows for inline style overrides.

Usage 📚

import React from 'react';
import { MetaMaskAvatar } from 'react-metamask-avatar';

export const App: React.FunctionComponent = () => {
    return (
        <MetaMaskAvatar address="0xb01F14d1C9000D453241221EB54648F1C378c970" size={24} />
    )
}

FAQ 🙋❓

I want to add custom styling. How can I do that?

The component accepts className and style props for custom styling.

Square avatar via style prop

import React from 'react';
import { MetaMaskAvatar } from 'react-metamask-avatar';

export const App: React.FunctionComponent = () => {
    return (
        <MetaMaskAvatar
            address="0xb01F14d1C9000D453241221EB54648F1C378c970"
            size={48}
            style={{ borderRadius: 0 }}
        />
    )
}

Square avatar via className prop

/* styles.css */
.square-avatar {
    border-radius: 0;
}

import React from 'react';
import { MetaMaskAvatar } from 'react-metamask-avatar';
import './styles.css';

export const App: React.FunctionComponent = () => {
    return (
        <MetaMaskAvatar
            address="0xb01F14d1C9000D453241221EB54648F1C378c970"
            size={48}
            className="square-avatar"
        />
    )
}

License 📄

MIT