lcfr-eth / ens-widgets

Reacts component for interacting with the Ethereum Name Service.

Home Page:https://enswidgets.xyz

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:

  • name: a preset name to register
  • shadowless: if true, the widget will not have a shadow
  • theme: easily choose between dark and light mode (defaults to light)
  • trackingCode: a 4-16 character unique string that will be included in the registration event for on-chain analytics
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.

About

Reacts component for interacting with the Ethereum Name Service.

https://enswidgets.xyz


Languages

Language:TypeScript 98.5%Language:JavaScript 1.5%