Last week in the Ethereum Name Service (ENS) Manager app we released a new feature where you can type an ENS name into any address field and it will resolve to the address.
You can also type in addresses and it will give you the reverse resolution.
It will also give you the blockies icon so you know if it matches your address or not. It makes it much easier to set up new names with the same address and you just need to type in your ENS name that has addresses setup.
The aim for this component was always to make it easier for people to use ENS in their own app and so we packaged this up and turned it into an npm package so you can use it in your React app too!
Introducing react-ens-address, a drop-in component for text inputs. Instead of just taking addresses for your dapp, you can now use ENS to make it easier for your users to add their address to your app. The setup is as simple as importing our component as follows and giving it a provider:
import ENSAddress from '@ensdomains/react-ens-address'<ENSAddress provider={window.web3 || window.ethereum} />
The component at the most basic level takes an onResolve function that fires when the component finishes resolving the input
<ENSAddress
provider={window.web3 || window.ethereum}
onResolve={({ address, name, type }) => {
if(type === 'name'){
console.log(address)
} if(type === 'address){
console.log(name)
}
}}
/>
The type is the type of value of the input, which is detected by the component, so you can expect if the input is an ENS name, it will resolve to an address and vice versa!
We are always looking for ways for people to integrate ENS in their dapps and if the community wants to contribute to an Angular or Vue component, that would also be really helpful!
