@tshirt/react-addressfinder

React Component for AddressFinder

This is a react wrapper component for AddressFinder's widget.

Getting started

Setup

Include the widget script manually

<script type="text/javascript" src="https://api.addressfinder.io/assets/v3/widget.js" async></script>

or the component will load the library for you if not found under the window object.

Install

yarn add react-addressfinder

Using the component

import React from 'react';

interface Props extends HTMLInputElement {
  addressFinderKey: string
  inputClassName?: string
  id: string
}

const component = ({
  addressFinderKey,
  inputClassName,
  id,
  ...props
}: Props) =>
  <WidgetInput
    addressFinderKey={addressFinderKey}
    inputClassName={inputClassName}
    id={id}
    onSelected={(fullAddress: string, address: Address) => {
      /* callback function to set full address and input value */
    }}
    {...props}
  />

Component props

Prop	Type	Required	Default
id	string	yes
addressFinderKey	string	yes
onSelected	function	yes
country	string	no	AU
container	HtmlElement	no	div with id address-container-${id}
inputClassName	string	no	''
listClassName	string	no	address-autocomplete__suggestions
itemClassName	string	no	address-autocomplete__suggestions__item
hoverClassName	string	no	address-autocomplete__suggestions__item--active

Prop: container

The container where suggestion list will be docked inside. If not provided, the list sits directly inside a div under the input.

Prop: onSelected

Signature of the onSelect function is

(fullAddress: string, address: Address) => void;

Example

import React from 'react';
import { WidgetInput, Address } from 'react-addressfinder';
import { FieldProps } from 'formik';
import configs from 'src/configuration';
import 'react-addressfinder/dist/widget.css';

interface Props extends FieldProps {
  id: string;
  suffix: string;
}

export default ({
  id,
  suffix,
  field,
  form: { touched, errors, setFieldValue },
  ...props
}: Props) => {
  const { name, onChange, ...otherfields } = field;

  const fieldClassName = `form-control${
    touched[name] && errors[name] ? ' is-invalid' : ''
  }`;

  return (
    <WidgetInput
      addressFinderKey={configs.AddressFinderKey}
      inputClassName={fieldClassName}
      id={id}
      name={name}
      onSelected={(fullAddress: string, address: Address) => {
        setFieldValue(id, fullAddress);
        setFieldValue(`${id}${suffix}`, address);
      }}
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
        /* make sure a valid address was selected from the list */
        setFieldValue(`${id}${suffix}`, null);
        onChange(e);
      }}
      {...otherfields}
      {...props}
    />
  );
};

More to come - component wrapper AddressFinder apis...