React FNS 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 FNS Address Component instead to resolve FNS names or provide feedback with reverse records.

Installation

React FNS Address Component can be installed via npm:

$ yarn add react-fns-address

$ npm install --save react-fns-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 FNSAddress from 'react-fns-address'

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

Basic Example 2

import React, { useState } from 'react'
import FNSAddress from 'react-fns-address'

function AddressInput() {
  const [resolved, setResolved] = useState({})
  const [type, setType] = useState(undefined)
  return (
    <>
      <FNSAddress
        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}`}
    </>
  )
}