Aptos Avatars React

Implementation of the Aptos Avatars shape library for React applications.

Installation

npm install aptos-avatars-react

How to Use

The avatar compoennt can be imported as a React component which renders an inline SVG element. If you choose to use a single shape, you can import the shape avatars directly. The package is built with ES Modules so the rest of the package will be tree-shaken out of your bundle.

import { AptosAvatar, AptosCoinAvatar, Shape2 } from "aptos-avatars-react";
 
// Usage
const App = () => {
  return (
    <div>
      <AptosCoinAvatar value="0xd2cf...cff23" border />
      <AptosAvatar value="0xd2cf...cff23" border shadow />
      <Shape2 value="0xd2cf...dff23" />
    </div>
  );
};
 
export default App;

Props

name	type	default	description
`value`*	`string`	required	Unique identifier for the user (e.g., address or Aptos Name) to randomly generate a shape and color
`size`	`number`	32	Size of the icon
`shadow`	`boolean`	false	Toggle the border
`border`	`boolean`	false	Toggle the shadow
`borderSize`	`number`	2	Width of the border, in pixels
`borderColor`	`string`	#fff	Color of the border
`radius`	`number`	`size`	Border radius of the avatar, in pixels
`displayValue`	`string`	N/A	Value to be displayed on the avatar instead of value. This can be a name instead of an identifier
`style`	`"character" \| "shape"`	"character"	Style of the avatar (either "character" or "shape")

Examples

Getting Started React Native