React HI Address Component

The Address component is a drop-in React component for your dapps. Anytime you need to take an address as an input, you can use the React HI Address Component instead to resolve HI names or provide feedback with reverse records.

Installation

React HI Address Component can be installed via npm:

$ yarn add @hidomains/react-hi-address

$ npm install --save @hidomains/react-hi-address

Parameters:

• presetValue - sets a default value for the input
• provider - Web3 provider (required)
• placeholder - set custom placeholder. Default: 'Enter Ethereum name or address'
• showBlockies - show digital image based on address (similar to github). Default: true
• DefaultIcon: Component - Icon to show on the left when nothing has been typed. Default: null
• onResolve - callback. Invokes when address or name resolved and also when there is an error. The callback is called with a resolutionObject. This has 4 properties:

{
  name: 'vitalik.eth',
  address: '0x123...',
  type: "address" // "address" or "name" is the inputValue type
  input: "0x123..." // if the resolve is called and returns an error, it will return with the other properties as null and only input will be defined
}

• onError - callback. Invokes every time error is occurs or invalid name is typed. When typed name is corrected, invokes with null after error.
• className - any custom class for styling. Already implemented small class renders component in small size

Styling

All styling made in style.css. It can be take as a start point. .cmp-address - reserved class for that component. .cmp-address.small - for small type of component. Overriding other classes under that parent you can safety style a component.

Basic Example 1

import HIAddress from '@hidomains/react-hi-address'

function Component() {
  return <HIAddress provider={window.web3 || window.ethereum} />
}

Basic Example 2

import React, { useState } from 'react'
import HIAddress from '@hidomains/react-hi-address'

function AddressInput() {
  const [resolved, setResolved] = useState({})
  const [type, setType] = useState(undefined)
  return (
    <>
      <ENSAddress
        provider={window.web3 || window.ethereum}
        onResolve={({ name, address, type }) => {
          if (type) {
            setResolved({
              value: address,
              type
            })
          }
        }}
      />
      {resolvedInput.type === 'address' &&
        `We found your reverse record ${resolved.value}`}
      {resolvedInput.type === 'name' &&
        `We found your address record ${resolved.value}`}
    </>
  )
}

Credit

Original version was built by @industral, which was then edited and published by @jefflau