@comms-id / australian-address-autocomplete-react
一个React钩子和一个完成的Comms组件。ID地址自动填写。易于访问，没有布局变化，始终显示数据属性。React 18或更高版本；这取决于 @comms-id/australian-address-autocomplete 没有别的了。
import { createAustralianAddressAutocompleteBrowserClient } from "@comms-id/australian-address-autocomplete/browser";
import { AustralianAddressAutocomplete } from "@comms-id/australian-address-autocomplete-react";
const client = createAustralianAddressAutocompleteBrowserClient({ relayUrl: "/api/comms-id/address" });
export const Checkout = () => (
<AustralianAddressAutocomplete
client={client}
label="Delivery address"
onSelect={(address, timing) => console.log(address.displayAddress, `${timing.ms} ms`)}
/>
);
relayUrl 您自己的服务器路由，设置与 @comms-id/relay您的服务器将调用签名为您注册的应用程序，因此浏览器不持有凭据。
您自己的标记： useAustralianAddressAutocomplete
const address = useAustralianAddressAutocomplete({ client, onSelect });
return (
<>
<input {...address.getInputProps()} />
<ul {...address.getListboxProps("Matches")} hidden={!address.state.open}>
{address.state.suggestions.map((s, i) => (
<li key={s.id} {...address.getOptionProps(i)}>{s.label}</li>
))}
</ul>
<p {...address.getStatusProps()}>{address.state.announcement}</p>
</>
);
道具获取者携带WAI-ARIA组合框合约：角色， aria-expanded， aria-controls， aria-activedescendant，键处理（箭头，Enter, Escape, Tab）和一个礼貌的生活区域。当你使用钩子时，自己渲染属性： import { ATTRIBUTION } from "@comms-id/australian-address-autocomplete-react".
组件
道具: client 和 label (需要), onSelect， minChars (3), debounceMs (400), limit (8), within， idPrefix， name， placeholder， disabled， required， className， listLabel， showTiming (真正的), renderOption.
使用自定义属性对其进行样式化 --comms-id-text， --comms-id-surface， --comms-id-border， --comms-id-active， --comms-id-radius 或者是 comms-id-australian-address-autocomplete__* 类名。它不需要样式表。
- 列表在输入的下面浮动；打开它什么也不动。状态行有预留高度。
- 失败的查找说明了原因(
Address search is unavailable)，并提供“再试一次”；它永远不会显示为“不匹配”。 - 它在服务器上以相同的结构呈现，并在StrictMode下工作。
数据属性
地址数据为G-NAF。组件总是显示所需的措辞。不要隐藏它。
LICENSE 是消费者客户牌照。