diff --git a/README.md b/README.md index 6fbc6cf..78a004c 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,7 @@ The element also emits **events** as a user interacts with it. This is how you c |---------------|--------------|-----------| |`select` |`Feature` |Dispatched when a user selects a suggested item from the list.| |`change` |`string` |Dispatched with every keystroke as the user types (not debounced).| +|`features` |`[]Feature` |Dispatched when the GeoJSON features backing the UI change.| |`error` |`Error` |Dispatched if an error occures during the request (for example if the rate limit was exceeded.)| diff --git a/example/index.html b/example/index.html index cac746d..f65b911 100644 --- a/example/index.html +++ b/example/index.html @@ -17,15 +17,24 @@ diff --git a/src/autocomplete/autocomplete.js b/src/autocomplete/autocomplete.js index b1e0066..9de7c05 100644 --- a/src/autocomplete/autocomplete.js +++ b/src/autocomplete/autocomplete.js @@ -22,6 +22,7 @@ export default ({ throttle: throttleWait = 200, onSelect: userOnSelectItem, onChange: userOnChange, + onFeatures: userOnFeatures, onError: userOnError, environment = window, rowTemplate, @@ -31,6 +32,13 @@ export default ({ const [isLoading, setIsLoading] = useState(false) const inputRef = useRef() + // call user-supplied onFeatures callback + if (typeof userOnFeatures === 'function') { + useEffect(() => { + userOnFeatures(results.features) + }) + } + // setting params & options as state so they can be passed to useMemo as dependencies, // which doesn’t work if they’re just objects as the internal comparison fails const [apiParams, setApiParams] = useState(params) diff --git a/src/index.js b/src/index.js index 6086377..4480847 100644 --- a/src/index.js +++ b/src/index.js @@ -31,6 +31,7 @@ const WebComponent = ({ host, ...autocompleteProps }) => { // dispatch custom events on the host (custom element) const dispatchEvent = (name, detail) => host.dispatchEvent(new CustomEvent(name, { detail })) const onSelect = (item) => dispatchEvent('select', item) + const onFeatures = (items) => dispatchEvent('features', items) const onError = (error) => dispatchEvent('error', error) const onChange = (text) => { // reflect the value of the input field on the element by setting the `value` attribute @@ -43,6 +44,7 @@ const WebComponent = ({ host, ...autocompleteProps }) => { onSelect={onSelect} onError={onError} onChange={onChange} + onFeatures={onFeatures} environment={environment} /> }