{"id":28708368,"url":"https://github.com/bpierre/addreth","last_synced_at":"2025-06-14T18:11:17.203Z","repository":{"id":204169035,"uuid":"697061964","full_name":"bpierre/addreth","owner":"bpierre","description":"🔖 A better way to display Ethereum addresses for React.","archived":false,"fork":false,"pushed_at":"2024-07-28T15:50:55.000Z","size":370,"stargazers_count":84,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-13T10:56:10.875Z","etag":null,"topics":["address","blockies","ethereum","identicon"],"latest_commit_sha":null,"homepage":"https://addreth.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bpierre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-09-27T01:22:11.000Z","updated_at":"2025-01-21T19:02:30.000Z","dependencies_parsed_at":"2023-12-13T14:58:27.410Z","dependency_job_id":null,"html_url":"https://github.com/bpierre/addreth","commit_stats":null,"previous_names":["bpierre/addreth"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/bpierre/addreth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Faddreth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Faddreth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Faddreth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Faddreth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bpierre","download_url":"https://codeload.github.com/bpierre/addreth/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Faddreth/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259860438,"owners_count":22922990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["address","blockies","ethereum","identicon"],"created_at":"2025-06-14T18:11:12.656Z","updated_at":"2025-06-14T18:11:17.180Z","avatar_url":"https://github.com/bpierre.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"100%\" height=\"auto\" alt=\"addreth\" src=\"https://github.com/bpierre/blo/assets/36158/8f4b0ac6-142a-4b2e-b55d-b6a033f0fb59\"\u003e\n\u003c/div\u003e\n\n\u003cp align=center\u003e\u003cbr\u003e\u003ca href=\"https://www.npmjs.com/package/addreth\"\u003e\u003cimg src=\"https://badgen.net/npm/v/addreth\" alt=\"npm version\"\u003e\u003c/a\u003e \u003ca href=\"https://bundlejs.com/?q=addreth\u0026treeshake=%5B%7B+Addreth+%7D%5D\u0026config=%7B%22esbuild%22%3A%7B%22external%22%3A%5B%22react%22%2C%22react-dom%22%2C%22wagmi%22%5D%7D%7D\"\u003e\u003cimg src=\"https://deno.bundlejs.com/badge?q=addreth\u0026treeshake=[{+Addreth+}]\u0026config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22,%22wagmi%22]}}\" alt=\"bundle size\"\u003e\u003c/a\u003e \u003ca href=\"https://github.com/bpierre/blo/addreth/main/LICENSE\"\u003e\u003cimg src=\"https://badgen.net/npm/license/addreth\" alt=\"License: MIT\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n## What It Does\n\n- 👁 Display addresses in a compact way, while retaining the ability to see them in full.\n- 📋 Copy the address to the clipboard with a single click.\n- 👉 Check the address on the block explorer of your choice.\n- 🏷 **ENS resolution** works out of the box with [wagmi](https://wagmi.sh/) (optional).\n- 🌈 **Six themes** to choose from or to customize as desired.\n- 🎹 **Accessible**: keyboard navigation and focus states work as expected.\n- 💆‍♀️ **Zero configuration**: just import and drop `\u003cAddreth /\u003e` in your app.\n- 🪚 **Customizable**: change the global configuration with `\u003cAddrethConfig /\u003e` (optional).\n- 📦 Small: **[4.89 kB](https://bundlejs.com/?bundle\u0026q=addreth\u0026treeshake=%5B%7B+Addreth+%7D%5D\u0026config=%7B%22esbuild%22%3A%7B%22external%22%3A%5B%22react%22%2C%22react-dom%22%2C%22wagmi%22%5D%7D%7D)**, styles and themes included, and no external dependencies.\n\n## How It Looks\n\n\u003cdiv align=\"center\"\u003e\n\n![With ENS name resolution](https://github.com/bpierre/blo/assets/36158/9a650577-88ff-4728-8c2e-ff69ead4dd17)\n![Without ENS name resolution](https://github.com/bpierre/blo/assets/36158/75066867-2759-431c-bade-26807a300e70)\n![Popup](https://github.com/bpierre/blo/assets/36158/e8539d4e-fb53-4dc5-8ccc-81f14abc0bc7)\n\n\u003ch3\u003eDesign by \u003ca href=\"https://twitter.com/dizzypaty\"\u003ePaty Davila\u003c/a\u003e\u003c/h3\u003e\n\n\u003c/div\u003e\n\n## Installation\n\n```sh\nnpm i -S addreth\npnpm add addreth\nyarn add addreth\n```\n\n## Getting Started\n\nImport `Addreth` and add it to your app:\n\n```tsx\nimport { Addreth } from \"addreth\";\n\n// If you are not using wagmi, import from \"addreth/no-wagmi\":\n// import { Addreth } from \"addreth/no-wagmi\";\n\nfunction App() {\n  return (\n    \u003cmain\u003e\n      \u003cAddreth address=\"0x…\" /\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\nFrom this point, you could check out the [demo page](https://addreth.vercel.app/) to see various examples of what can be done with the component, or keep reading this documentation to learn more about the available options.\n\n### Styles\n\nAs with most React components, addreth relies on a CSS foundation in order to work properly. There is no standard way to distribute CSS files with React components, so addreth provides three ways to handle this:\n\n- When used without `\u003cAddrethConfig/\u003e`, `\u003cAddreth /\u003e` renders its own CSS, this is to make it as easy as possible to get started and is fine performance wise for most cases. However, you might want to consider using `\u003cAddrethConfig /\u003e` if many instances of the component are being rendered simultaneously (see next point).\n\n  ```tsx\n  import { Addreth } from \"addreth\";\n\n  function App() {\n    return \u003cAddreth /\u003e;\n  }\n  ```\n- When the [`\u003cAddrethConfig /\u003e`](#addrethconfig-) is rendered anywhere above `\u003cAddreth /\u003e`, the top level one will take the responsibility to render styles once, making it more efficient.\n\n  ```tsx\n  import { Addreth, AddrethConfig } from \"addreth\";\n\n  function App() {\n    return (\n      \u003cAddrethConfig\u003e\n        \u003cAddreth /\u003e\n      \u003c/AddrethConfig\u003e\n    );\n  }\n  ```\n- You can also bundle the CSS yourself if your bundler supports it, by importing `\"addreth/styles.css\"` and setting `externalCss` to `true` in the configuration to make the CSS rendering fully static. This is the most efficient way to render the styles.\n\n  ```tsx\n  import { Addreth, AddrethConfig } from \"addreth\";\n  import \"addreth/styles.css\";\n\n  function App() {\n    return (\n      \u003cAddrethConfig externalCss\u003e\n        \u003cAddreth /\u003e\n      \u003c/AddrethConfig\u003e\n    );\n  }\n  ```\n\n## API\n\n### \u0026lt;Addreth /\u003e\n\nThe `\u003cAddreth /\u003e` component only requires the `address` prop to be set. It will display the address in a compact way while provide a convenient set of features. Multiple props are available to customize it in different ways:\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003eaddress\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `address` prop is the only required prop, and it must be a valid Ethereum address.\n\n```tsx\n\u003cAddreth address=\"0x0000000000000000000000000000000000000000\" /\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003eactions\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `actions` prop allows to control the action buttons inside the badge. It can be set to `\"all\"` (default), `\"copy\"`, `\"explorer\"` or `\"none\"`.\n\n```tsx\n// Display the copy button only.\n// The block explorer button will still appear on the popup.\n\u003cAddreth address=\"0x…\" actions=\"copy\" /\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003eens\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `ens` prop allows to control whether to use the ENS name resolution, and it is enabled by default.\n\nThis is an alias for `icon=\"identicon\"` and `label=\"address\"`.\n\n```tsx\n\u003cAddreth address=\"0x…\" ens={false} /\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003eexplorer\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `explorer` prop allows to generate the name and URL of a given block explorer (e.g. Etherscan).\n\n```tsx\n\u003cAddreth\n  address=\"0x…\"\n  explorer={(address) =\u003e ({\n    name: \"Base\",\n    accountUrl: `https://basescan.com/address/${address}`,\n  })}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003eexternalCss\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `externalCss` prop allows to control whether to inject the CSS or not. This is useful if you want to bundle the Addreth CSS with your app. It defaults to `false`.\n\n```tsx\nimport { Addreth, AddrethConfig } from \"addreth\";\nimport \"addreth/styles.css\";\n\nfunction App() {\n  return (\n    \u003cAddrethConfig externalCss\u003e\n      \u003cAddreth /\u003e\n    \u003c/AddrethConfig\u003e\n  );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003efont\u003c/code\u003e and \u003ccode\u003efontMono\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `font` and `fontMono` props allow to control the font names used for the badge and buttons. If `fontMono` is specified, it will be applied to the address specifically. If neither `font` nor `fontMono` are specified, the fonts will be inherited from the web page.\n\n```tsx\n// Use the same font for the address and buttons\n\u003cAddreth address=\"0x…\" font=\"Anonymous Pro\" /\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003eicon\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `icon` prop allows to control the icon displayed in the badge. It can be set to `\"ens\"` (default), `\"identicon\"`, `false` or `null`.\n\n- If set to `\"ens\"` and the app uses [wagmi](https://wagmi.sh/), the ENS avatar corresponding to the address, if it exists, will be displayed. Otherwise, the icon will fallback to `\"identicon\"`.\n- If set to `\"identicon\"`, the [identicon](https://github.com/bpierre/blo) corresponding to the address will be displayed.\n- If set to `false` or `null`, no icon will be displayed.\n- If set to a function, it will be called with the address as argument and must return either React element to replace the icon entirely, or a string to provide an image URL.\n\n```tsx\n// Display the ENS avatar if available, otherwise display the identicon.\n\u003cAddreth address=\"0x…\" icon=\"ens\" /\u003e;\n\n// Always display the identicon.\n\u003cAddreth address=\"0x…\" icon=\"identicon\" /\u003e;\n\n// Do not display any icon.\n\u003cAddreth address=\"0x…\" icon={false} /\u003e;\n\n// Custom icon with a URL.\n\u003cAddreth\n  address=\"0x…\"\n  icon={(address) =\u003e `https://example.com/identicon/${address}.svg`}\n/\u003e;\n\n// Custom icon with a React element.\n\u003cAddreth\n  address=\"0x…\"\n  icon={(address) =\u003e (\n    \u003cimg src={`https://example.com/identicon/${address}.svg`} /\u003e\n  )}\n/\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003elabel\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `label` prop allows to control the label displayed in the badge. It can be set to `\"ens\"` (default), `\"address\"` or a function.\n\n- If set to `\"ens\"` and the app uses [wagmi](https://wagmi.sh/), the ENS name corresponding to the address, if it exists, will be displayed. Otherwise, the label will fallback to `\"address\"`.\n- If set to `\"address\"`, the address will be displayed, shortened to `shortenAddress` characters on each side (4 by default).\n- If set to a function, it will be called with the address as argument and must return a React node.\n\n```tsx\n// Display the ENS name if available.\n\u003cAddreth address=\"0x…\" label=\"ens\" /\u003e;\n\n// Always display the address.\n\u003cAddreth address=\"0x…\" label=\"address\" /\u003e;\n\n// Custom label.\n\u003cAddreth\n  address=\"0x…\"\n  label={(address) =\u003e \u003cb\u003e{address}\u003c/b\u003e}\n/\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003emaxWidth\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `maxWidth` prop allows to control the maximum width of the badge. If not specified, the badge will adapt to its parent width.\n\n```tsx\n// Limit the badge width to 200px.\n\u003cAddreth address=\"0x…\" maxWidth={200} /\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003epopupNode\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `popupNode` prop allows to control the node used to render the popup. It defaults to `document.body`.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003eshortenAddress\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `shortenAddress` prop allows to control the number of first and last characters to show for the address. It defaults to `4`. Set it to `false` to display the full address.\n\n```tsx\n// Display the first and last 6 characters of the address.\n\u003cAddreth address=\"0x…\" shortenAddress={6} /\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003estylesId\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `stylesId` prop allows to control the ID attribute of the style element used to inject the CSS in the page. It defaults to `\"addreth-styles\"`.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003etheme\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe `theme` prop allows to control the theme used for the badge and buttons. It can be set to one of the provided themes, or used to define a custom theme.\n\nAvailable themes:\n\n- `light` (default)\n- `dark`\n- `unified-light`\n- `unified-dark`\n- `simple-light`\n- `simple-dark`\n\nYou can also define a custom theme by passing an object. If `base` is provided, it will extend from that theme. Otherwise, it will extend the default theme (`light`), or the parent one if provided (see `AddrethConfig` to check how to define a parent config).\n\n```tsx\ntype ThemeDeclaration = {\n  base?: ThemeName; // the theme to extend from\n\n  // general\n  textColor?: Color; // text color of the button and popup\n  secondaryColor?: Color; // color of icons\n  focusColor?: Color; // color of the focus ring\n  fontSize?: number; // font size used everywhere\n\n  // badge\n  badgeBackground?: Color; // background color for the badge\n  badgeRadius?: number; // radius used for the badge (if badgeGap is 0) or for individual buttons\n  badgeIconRadius?: number; // radius for the badge icon (defaults to badgeRadius if not set)\n  badgeGap?: number; // gap between badge itemstype\n  badgeHeight?: number; // height of the badge\n  badgePadding?: number; // inner padding of the badge\n  badgeLabelPadding?: number; // padding inside the badge label\n\n  // popup\n  popupBackground?: Color; // background color of the popup\n  popupRadius?: number; // radius of the popup\n  popupShadow?: string; // shadow of the popup\n};\n```\n\nSee [theme.ts](./src/theme.ts) for more details.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003eunderline\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nDisplay the label underlined.\n\n```tsx\n\u003cAddreth address=\"0x…\" underline /\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e\u003ccode\u003euppercase\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nDisplay the label in uppercase.\n\n```tsx\n\u003cAddreth address=\"0x…\" uppercase /\u003e;\n```\n\n\u003c/details\u003e\n\n### \u0026lt;AddrethConfig /\u003e\n\nHaving to wrap `\u003cAddreth /\u003e` in order to provide your desired default configuration can be tedious, which is why `\u003cAddrethConfig /\u003e` is provided. It allows to customize the default configuration of `\u003cAddreth /\u003e` and support the same props, except `address`.\n\n```tsx\nimport { Addreth, AddrethConfig } from \"addreth\";\n\nfunction App() {\n  return (\n    \u003cAddrethConfig font=\"Anonymous Pro\" theme=\"dark\"\u003e\n      \u003cAddreth address=\"0x…\" /\u003e\n    \u003c/AddrethConfig\u003e\n  );\n}\n```\n\nNotes:\n\n- `\u003cAddrethConfig /\u003e` can be used multiple times in the same app, and its configuration will be merged.\n- The most top level `\u003cAddrethConfig /\u003e` will be responsible for rendering the CSS, so it is recommended to use it at the top level of your app even if you don’t intent to customize its configuration.\n\n## FAQ\n\n### Is it \u003cabbr title=\"Server-side rendering\"\u003eSSR\u003c/abbr\u003e-friendly?\n\nYes, both the component and its styles can be prerendered on the server.\n\n### Is it \u003cabbr title=\"React Server Components\"\u003eRSC\u003c/abbr\u003e-friendly?\n\nYes, Addreth is declared as a Client Component in this context. Check out this [excellent article by Josh Comeau](https://www.joshwcomeau.com/react/server-components/) to learn more about how it works.\n\n### I am not using wagmi, can I still use Addreth?\n\nYes, wagmi is only used for ENS related features if present, but the component can work without by importing `\"addreth/no-wagmi\"`:\n\n```tsx\nimport { Addreth } from \"addreth/no-wagmi\";\n```\n\nYou can also use the mechanism of your choice to resolve the ENS name and avatar, and set these as `icon` and `label`:\n\n```tsx\nimport { Addreth } from \"addreth/no-wagmi\";\nimport { useENS } from \"my-ens-library\";\n\nfunction App() {\n  const { name, avatar } = useENS(\"0x…\");\n  return \u003cAddreth address=\"0x…\" icon={avatar} label={name} /\u003e;\n}\n```\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpierre%2Faddreth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbpierre%2Faddreth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpierre%2Faddreth/lists"}