ens-widgets
TypeScript icon, indicating that this package has built-in type declarations

0.0.11 • Public • Published

ENS Widgets

npm

A small, configurable React component for interacting with the Ethereum Name Service.

Installation

Install the widgets library and its peer dependencies via npm or yarn.

yarn add ens-widgets ethers wagmi
npm install ens-widgets ethers wagmi

Name Registration Widget

ens-widget

This component assumes your app is already wrapped in <WagmiConfig> and either a RainbowKit or ConnectKit provider.

Required props:

Optional props:

  • hasContainer: if true (default), the widget will be wrapped in a container with padding and a border
  • hasHeader: if true (default), the widget will have a header with a title and link to ens.domains
  • name: a preset name to register
  • onStatusUpdate: a callback that gives you access to the status of the registration process
  • shadowless: if true, the widget will not have a shadow
  • theme: easily choose between dark and light mode (defaults to light)
  • trackingCode: an ENS name that will be hashed and included in the transaction for on-chain analytics according to ENSIP-14
import { RegistrationWidget } from 'ens-widgets'
import { useConnectModal } from '@rainbow-me/rainbowkit'

export default function Page() {
  const { openConnectModal } = useConnectModal()

  return <RegistrationWidget connectAction={openConnectModal} />
}

Running examples

Clone this repo and install dependencies

git clone https://github.com/gskril/ens-widgets.git
cd ens-widgets
yarn install

Start the code bundler for the component and the example Vite app

yarn dev:vite # or dev:next for a Next.js example
# then in another terminal window:
yarn dev:widget

Any changes to packages/widget or examples/vite will auto-reload the page.

Readme

Keywords

none

Package Sidebar

Install

npm i ens-widgets

Weekly Downloads

2

Version

0.0.11

License

ISC

Unpacked Size

823 kB

Total Files

34

Last publish

Collaborators

  • gregskril