React FHIR Client

React Hooks for `fhirclient`.

1. Install it using npm

`npm i react-fhirclient
`

or with `yarn`:

`yarn add react-fhirclient
`

2. Add FhirClientProvider to your ReactDOM tree.

ReactDOM.render(
  <React.StrictMode>
    <FhirClientProvider>
      <App />
    </FhirClientProvider>
  </React.StrictMode>,
  document.getElementById("root"),
);

3. Use useFhirClient() in your hooks.

import { useState, useEffect } from "react";
import { useFhirClient } from "react-fhirclient";

function App() {
  const [patient, setPatient] = useState();
  const fhirclient = useFhirClient();

  return <div className="App"></div>;
}

export default App;

4. Make FHIR Requests in useEffect

import { useState, useEffect } from "react";
import { useFhirClient } from "react-fhirclient";

function App() {
  const [patient, setPatient] = useState();
  const fhirclient = useFhirClient();

  useEffect(() => {
    const getPatient = async () => {
      if (fhirclient) {
        const patient = await fhirclient.request(
          `Patient/${fhirclient.patient.id}`,
        );
        setPatient(patient);
      }
    };
    getPatient();
  }, []);

  return (
    <div className="App">
      <pre>
        <code>{JSON.stringify(patient, null, 2)}</code>
      </pre>
    </div>
  );
}

export default App;

FAQ:

"Why do we need the `if (fhirclient)` guard?"

Due to authentication with the authorization server being an asynchronous process, there will be a moment when the client is not instantiated and thus will be `undefined`.

In the Future

Supporting any FHIR client would be beneficial to the community. If you have a FHIR client that you want supported, raise an Issue describing it.