Getting StartedReact SDK

Payer Autocomplete

Bridge’s React SDK is in beta! Expect breaking changes, bugs, and missing features. Please talk to us before integrating.

Bridge’s Payer Search API allows you to drive a powerful Payer search, with autocomplete, for your patients or tools.

The React SDK boils this down to a single hook, usePayerAutocomplete, and buries away API calls, caching, and optimized pre-population.

1function usePayerAutocomplete(
2  query: string,
3  opts?: { limit?: number },
4): { results: Payer[]; isLoading: boolean }

The query argument is required, it’s the search query the user is typing. The second opts argument is optional, it configures the search query. The limit is the maximum number of results to return. If not defined, defaults to 10.

The function returns an object with a results and isLoading fields. Results are an array of Payers, with the following shape:

1interface Payer {
2  id: string // Bridge Payer ID `pyr_xxx`
3  name: string // The user-facing name of the Payer
4  memberId: boolean // Whether the Payer requires the Member ID for all patients
5  hint: string | null // User-facing hint to display, specific to this Payer
6}

Note: there may be multiple results with the same Payer ID, this is expected, and helps patients specifically match their card/plan.

Results Example
1[
2  {
3    "id": "pyr_L7oHR2UJ8b"
4    "name": "Aetna",
5    "memberId": false,
6    "hint": "Member ID typically leads with a W",
7  },
8  {
9    "id": "pyr_dn6bCpOOVi"
10    "name": "United Healthcare",
11    "memberId": false,
12    "hint": null,
13  },
14  {
15    "id": "pyr_ISgkx8YeI8hOXvHG"
16    "name": "Blue Cross Blue Shield",
17    "memberId": true,
18    "hint": "Member ID typically leads with 3 letters",
19  },
20  ...
21]

Example

See the Demo Project for a full example using MUI’s Autocomplete component.

1import { usePayerAutocomplete, useEligibilityInputField } from "@usebridge/sdk-react"
2import { useState } from "react"
3...
4
5export const PayerAutocompleteField = () => {
6    // You control the input state
7    const [ inputValue, setInputValue ] = useState("")
8
9    // Feed the current input value into the first argument of `usePayerAutocomplete`
10    const { results, isLoading } = usePayerAutocomplete(inputValue)
11
12    // See the next section, Eligibility Input, for more on this
13    const { value, setValue, isDisabled } = useEligibilityInputField("payer")
14
15    // Drive your own text field / autocomplete component
16    return (
17        <Autocomplete
18            loading={isLoading}
19            disabled={disabled}
20            options={results}
21            inputValue={inputValue}
22            onInputChange={(v) => setInputValue(v)}
23            value={value}
24            onChange={(v) => setValue(v)}
25
26        />
27    )
28}
Eligibility Input

Use the useEligibilityInputField hook to drive your form