JSPM

@polkadot/react-identicon

0.63.2-2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 28663
  • Score
    100M100P100Q149496F
  • License Apache-2.0

Renders an SVG picture representing an address

Package Exports

  • @polkadot/react-identicon
  • @polkadot/react-identicon/Demo
  • @polkadot/react-identicon/Demo.d.ts
  • @polkadot/react-identicon/Identicon
  • @polkadot/react-identicon/Identicon.d.ts
  • @polkadot/react-identicon/icons
  • @polkadot/react-identicon/icons/Beachball
  • @polkadot/react-identicon/icons/Beachball.d.ts
  • @polkadot/react-identicon/icons/Empty
  • @polkadot/react-identicon/icons/Empty.d.ts
  • @polkadot/react-identicon/icons/Ethereum
  • @polkadot/react-identicon/icons/Ethereum.d.ts
  • @polkadot/react-identicon/icons/Jdenticon
  • @polkadot/react-identicon/icons/Jdenticon.d.ts
  • @polkadot/react-identicon/icons/Polkadot
  • @polkadot/react-identicon/icons/Polkadot.d.ts
  • @polkadot/react-identicon/icons/index.d.ts
  • @polkadot/react-identicon/index.d.ts
  • @polkadot/react-identicon/package-info.json
  • @polkadot/react-identicon/package.json
  • @polkadot/react-identicon/types
  • @polkadot/react-identicon/types.d.ts

Readme

@polkadot/react-identicon

A generic identity icon that can render icons based on the theme, be it Substrate or Polkadot

Usage Examples

To install the component, do yarn add @polkadot/react-identicon

Inside a React component, you can now render any account with the associated icon -

import Identicon from '@polkadot/react-identicon';

...
render () {
  // address is an ss58-encoded address or publicKey (hex string or Uint8Array)
  const { address } = this.props;
  // size (optional) is a number, indicating the size (in pixels, 64 as default)
  const size = 32;
  // theme (optional), depicts the type of icon, one of
  // 'polkadot', 'substrate' (default), 'beachball' or 'jdenticon'
  const theme = 'polkadot';

  // standard className & style props are also available
  return (
    <Identicon
      value={address}
      size={size}
      theme={theme}
    />
  );
}
...