Package Exports

react-addressfinder
react-addressfinder/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-addressfinder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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`
raw	boolean	no	false
addressParams	Record	no

Address param options can be found here

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';

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}
    />
  );
};

Find out more details in official docs