@mountainpass/addressr-react 0.5.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -42,8 +42,33 @@ function MyForm() {
|
|
|
42
42
|
| `placeholder` | `string` | `"Start typing an address..."` | Input placeholder |
|
|
43
43
|
| `className` | `string` | -- | Additional CSS class for the wrapper |
|
|
44
44
|
| `debounceMs` | `number` | `300` | Debounce delay in milliseconds |
|
|
45
|
+
| `name` | `string` | `"address"` | Input name attribute for form submission |
|
|
46
|
+
| `required` | `boolean` | -- | Sets `aria-required` on the input |
|
|
45
47
|
| `apiUrl` | `string` | `"https://addressr.p.rapidapi.com/"` | API root URL |
|
|
46
48
|
| `apiHost` | `string` | `"addressr.p.rapidapi.com"` | RapidAPI host header |
|
|
49
|
+
| `renderLoading` | `() => ReactNode` | -- | Custom loading state renderer |
|
|
50
|
+
| `renderNoResults` | `() => ReactNode` | -- | Custom no-results renderer |
|
|
51
|
+
| `renderError` | `(error: Error) => ReactNode` | -- | Custom error renderer |
|
|
52
|
+
| `renderItem` | `(item, highlighted, segments) => ReactNode` | -- | Custom result item renderer |
|
|
53
|
+
|
|
54
|
+
### Render customization
|
|
55
|
+
|
|
56
|
+
Override any rendering zone while keeping built-in search logic and keyboard navigation:
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
<AddressAutocomplete
|
|
60
|
+
apiUrl="https://api.addressr.io/"
|
|
61
|
+
onSelect={handleSelect}
|
|
62
|
+
renderLoading={() => <li>Loading addresses...</li>}
|
|
63
|
+
renderNoResults={() => <li>No matches found</li>}
|
|
64
|
+
renderError={(err) => <div role="alert">Error: {err.message}</div>}
|
|
65
|
+
renderItem={(item, highlighted, segments) => (
|
|
66
|
+
<span>{segments.map((s, i) => s.highlighted ? <mark key={i}>{s.text}</mark> : s.text)}</span>
|
|
67
|
+
)}
|
|
68
|
+
/>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
When you provide a custom renderer, you are responsible for accessibility in that zone -- use appropriate roles and contrast ratios.
|
|
47
72
|
|
|
48
73
|
## Headless hook
|
|
49
74
|
|
|
@@ -91,6 +116,42 @@ function MyCustomAutocomplete() {
|
|
|
91
116
|
| `selectAddress` | `(pid: string) => Promise<void>` | Fetch full address detail |
|
|
92
117
|
| `clear` | `() => void` | Reset all state |
|
|
93
118
|
|
|
119
|
+
## Theming
|
|
120
|
+
|
|
121
|
+
All visual styles use CSS custom properties. Override on any ancestor element:
|
|
122
|
+
|
|
123
|
+
```css
|
|
124
|
+
.my-form {
|
|
125
|
+
--addressr-font-family: 'Inter', sans-serif;
|
|
126
|
+
--addressr-border-color: #ccc;
|
|
127
|
+
--addressr-focus-color: #0066cc;
|
|
128
|
+
--addressr-highlight-bg: #e0f0ff;
|
|
129
|
+
--addressr-error-color: #c62828;
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
| Token | Default | Description |
|
|
134
|
+
|-------|---------|-------------|
|
|
135
|
+
| `--addressr-font-family` | `system-ui, -apple-system, sans-serif` | Font stack |
|
|
136
|
+
| `--addressr-padding-x` | `0.75rem` | Horizontal padding |
|
|
137
|
+
| `--addressr-padding-y` | `0.625rem` | Vertical padding |
|
|
138
|
+
| `--addressr-text-color` | `inherit` | Text color |
|
|
139
|
+
| `--addressr-border-color` | `#767676` | Input and dropdown border |
|
|
140
|
+
| `--addressr-border-radius` | `0.25rem` | Corner radius |
|
|
141
|
+
| `--addressr-focus-color` | `#005fcc` | Focus ring and border |
|
|
142
|
+
| `--addressr-z-index` | `1000` | Dropdown stacking order |
|
|
143
|
+
| `--addressr-bg` | `#fff` | Dropdown background |
|
|
144
|
+
| `--addressr-shadow` | `0 4px 6px rgba(0,0,0,0.1)` | Dropdown shadow |
|
|
145
|
+
| `--addressr-highlight-bg` | `#e8f0fe` | Active item background |
|
|
146
|
+
| `--addressr-mark-weight` | `700` | Search match font weight |
|
|
147
|
+
| `--addressr-mark-color` | `inherit` | Search match text color |
|
|
148
|
+
| `--addressr-muted-color` | `#555` | Status and empty text |
|
|
149
|
+
| `--addressr-error-color` | `#d32f2f` | Error message text |
|
|
150
|
+
| `--addressr-skeleton-from` | `#e0e0e0` | Loading skeleton base |
|
|
151
|
+
| `--addressr-skeleton-to` | `#f0f0f0` | Loading skeleton shimmer |
|
|
152
|
+
|
|
153
|
+
The loading state shows animated skeleton lines instead of text. The animation respects `prefers-reduced-motion: reduce`.
|
|
154
|
+
|
|
94
155
|
## Accessibility
|
|
95
156
|
|
|
96
157
|
Built with [downshift](https://www.downshift-js.com/) for WAI-ARIA combobox pattern compliance:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mountainpass/addressr-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "React address autocomplete component for Australian address search via Addressr",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Mountain Pass",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@windyroad/link-header": "^1.0.1",
|
|
37
37
|
"downshift": "^9.0.0",
|
|
38
|
-
"@mountainpass/addressr-core": "0.
|
|
38
|
+
"@mountainpass/addressr-core": "0.6.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@testing-library/jest-dom": "^6.6.3",
|