Jazzicon in pure React

Reimplementation of Dan Finlay's jazzicon in pure react.

Generates inline SVG for an icon based on Ethereum address. It avoids calling document, thus suitable for server-side-generated pages, like in Next.js.

Online Demo

Installation

yarn add @mkmoss/jazzicon-react

Usage

import { Jazzicon } from '@mkmoss/jazzicon-react';

export default function() {
  return (
    <div style={{ width: '100px', height: '100px' }}>
      <Jazzicon address={'0xBAc675C310721717Cd4A37F6cbeA1F081b1C2a07'} />
    </div>
  );
}

Remember to wrap Jazzicon component into something with desired width and height, as the component fills 100% of the enclosing component.

Alternatively, you could modify appearance via styled-components or emotion:

import { Jazzicon } from '@mkmoss/jazzicon-react';
import styled from '@emotion/styled';
const ModifiedJazzicon = styled(Jazzicon)({
  width: 100,
  height: 100,
});
export default function Icon() {
  return (
    <ModifiedJazzicon address={'0xBAc675C310721717Cd4A37F6cbeA1F081b1C2a07'} />
  );
}