@comms-id / acnc-charity-lookup-react
一个React钩子和一个用于通信的成品组件。ID Charity字段：用户输入慈善机构的11位ABN。易于访问，没有布局变化，始终显示数据属性。React 18或更高版本；这取决于 @comms-id/acnc-charity-lookup 没有别的了。
import { createAcncCharityLookupBrowserClient } from "@comms-id/acnc-charity-lookup/browser";
import { AcncCharityLookupLookup } from "@comms-id/acnc-charity-lookup-react";
const client = createAcncCharityLookupBrowserClient({ relayUrl: "/api/comms-id/charity" });
export const Form = () => (
<AcncCharityLookupLookup
client={client}
onSelect={(record, timing) => console.log(record, `${timing.ms} ms`)}
/>
);
relayUrl 您自己的服务器路由，设置与 @comms-id/relay您的服务器将调用签名为您注册的应用程序，因此浏览器不持有凭据。
这个领域是做什么的
- 一个荷兰: 在ACNC寄存器中一次查找11位数字（允许空格和连字符）。超过11位的字母在浏览器中被拒绝，并且不会发送任何内容。慈善机构不按名字搜索。
- 结果是在固定的注释行上有一个摘要行（法定名称、ABN、州和邮政编码），因此页面永远不会移动。
- “没有找到慈善机构。”（ABN不是acnc注册的慈善机构）和“慈善查询不可用”是不同的信息；故障提示“再试一次”。
您自己的标记： useAcncCharityLookup
const field = useAcncCharityLookup({ client, onSelect });
return (
<>
<input {...field.getInputProps()} />
<ul {...field.getListboxProps("Matches")} hidden={!field.state.open}>
{field.state.suggestions.map((s, i) => (
<li key={s.key} {...field.getOptionProps(i)}>{s.primary}</li>
))}
</ul>
<p {...field.getStatusProps()}>{field.state.announcement}</p>
</>
);
道具获取者携带WAI-ARIA组合框合约：角色， aria-expanded， aria-controls， aria-activedescendant，键处理（箭头，Enter, Escape, Tab）和一个礼貌的生活区域。当你使用钩子的时候，你可以自己呈现属性：是的 field.state.attribution.
组件
道具: client (需要), label （默认为“Charity ABN”）， onSelect， minChars (3), debounceMs (400), limit (8), settings， 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-acnc-charity-lookup__* 类名。它不需要样式表。
- 列表在输入的下面浮动；打开它什么也不动。注线有一个预留高度。
- 查找失败会说明原因并提示“再试一次”；它永远不会显示为“不匹配”。
- 它在服务器上以相同的结构呈现，并在StrictMode下工作。
数据属性
慈善数据来自澳大利亚慈善和非营利委员会（ACNC），通过data.gov. AU （CC BY 3.0 AU）。组件总是显示归属。不要隐藏它。
LICENSE 是消费者客户牌照。 src/ 是由 @comms-id/forge-transformers 而且从来没有手工编辑过。