Building Forms

React-specific hooks for driving eligibility forms. For field types, see Eligibility Fields.

Payer autocomplete

usePayerAutocomplete wraps payer search with caching:

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

Pass the user’s search query as the first argument. limit defaults to 10.

Eligibility input

useEligibilityInputField manages field state within an eligibility session:

const { value, setValue, isVisible, isRequired, isDisabled, isValid } =
  useEligibilityInputField("firstName");

value and setValue are strongly typed based on the field name.

Example

See the Demo Project for a full autocomplete example.

import {
  usePayerAutocomplete,
  useEligibilityInputField,
} from "@usebridge/sdk-react";
import { useState } from "react";
export const PayerAutocompleteField = () => {
  const [inputValue, setInputValue] = useState("");
  const { results, isLoading } = usePayerAutocomplete(inputValue);
  const { value, setValue, isDisabled } = useEligibilityInputField("payer");
  return (
    <Autocomplete
      loading={isLoading}
      disabled={isDisabled}
      options={results}
      inputValue={inputValue}
      onInputChange={(v) => setInputValue(v)}
      value={value}
      onChange={(v) => setValue(v)}
    />
  );
};

export const MemberIdField = () => {
  const { isVisible, isDisabled, isRequired, value, setValue } =
    useEligibilityInputField("memberId");
  if (!isVisible) return null;
  return (
    <TextField
      disabled={isDisabled}
      label={`Member ID ${isRequired ? "(Required)" : "(Optional)"}`}
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
};

Soft Check

Fast eligibility gut-checks, without patient information

Hard Check

Full eligibility checks, cost estimates, and provider eligibility