@drug-database/react

React bindings for the Drug Database — a worldwide drug master + interactions API covering Switzerland, the European Union, and the United States. A drop-in <DrugDatabaseSearch> typeahead (~12KB gzipped) plus hooks for drug lookup and interaction checks. Built on top of @drug-database/sdk.

Install

npm i @drug-database/react

(Marketing snippet — same as on the docs page.)

Peer-deps: react@^18 || ^19. Runtime dep: @drug-database/sdk.

Drop-in typeahead

import { DrugDatabaseSearch } from '@drug-database/react'

export function PrescribeBox() {
  return (
    <DrugDatabaseSearch
      apiKey={process.env.NEXT_PUBLIC_DRUG_DATABASE_KEY!}
      country="DE" /* or any of CH/GB/FR/DE/IT/AT/ES/DK/SE/FI/NO/NL/BE/IE/PT/US */
      limit={5}
      onSelect={(drug) => console.log('selected', drug)}
    />
  )
}

The component is accessible by default (ARIA combobox + listbox roles, full keyboard navigation). Pass unstyled to opt out of the built-in look and restyle from scratch.

Provider + hooks

For multi-component apps, mount a provider once:

import { DrugDatabaseProvider, useDrugSearch } from '@drug-database/react'

function App() {
  return (
    <DrugDatabaseProvider options={{ apiKey: 'dd_live_...' }}>
      <SearchBox />
    </DrugDatabaseProvider>
  )
}

function SearchBox() {
  const [q, setQ] = React.useState('')
  const { results, loading, error } = useDrugSearch(q, { country: 'DE' })
  // …
}

Available hooks:

| Hook | What it does | | --- | --- | | useDrugSearch(q, opts) | Debounced typeahead against /v1/drugs. | | useDrug(id, opts) | Fetch a single drug by id. | | useInteractions(drugs, opts) | Run /v1/interactions/check whenever the list changes. |

Bundle size

The component + hooks are hand-written (no swr, no @tanstack/query, no state lib) and target ~12KB gzipped for the common case (<DrugDatabaseSearch> + useDrugSearch + the SDK's drugs methods only). Tree shake by importing only what you use.

License

MIT