Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@medplum/react-hooks
Advanced tools
The Medplum React Hooks Library provides non-UI React features for your application.
Most users will want the full Medplum React Component Library, @medplum/react
. However, that library has peer dependencies on Mantine, which may not be desired.
useMedplum
- handles shared global instance of MedplumClient
useResource
- reads a resource by ID or reference with intelligent cachinguseSearch
- performs a FHIR search with intelligent state managementuseSubscription
- subscribes to a FHIR search criteria and calls a given callback upon receiving a relevant notificationAdd as a dependency:
npm install @medplum/react-hooks
Note the following peer dependencies:
import { MedplumClient } from '@medplum/core';
import { MedplumProvider } from '@medplum/react';
const medplum = new MedplumClient();
export function App() {
return (
<MedplumProvider medplum={medplum}>
<MyPage1 />
<MyPage2 />
<Etc />
</MedplumProvider>
);
}
For more details on how to setup MedplumClient
, refer to the docs for medplum
.
useMedplum
import { useMedplum } from '@medplum/react-hooks';
export function MyComponent() {
const medplum = useMedplum();
return <div>{JSON.stringify(medplum.getProfile())}</div>;
}
useMedplumContext
useMedplumContext
can be used to access the MedplumContext
provided by the MedplumProvider
directly. The MedplumContext
has the following interface:
interface MedplumContext {
medplum: MedplumClient;
navigate: MedplumNavigateFunction;
profile?: ProfileResource;
loading: boolean;
}
loading
to know when MedplumClient
initialization is doneYou can use the loading
property from useMedplumContext()
to know when MedplumClient
has finished initialization successfully. loading
is updated asynchronously so it will usually start as false
and change to true
once the client has finished its initialization.
function MyComponent(): JSX.Element {
const { loading } = useMedplumContext();
return loading ? (
<Spinner />
) : (
<div>Loaded!</div>
);
}
useSubscription
useSubscription
creates an in-memory Subscription
resource with the given criteria on the Medplum server and calls the given callback when an event notification is triggered by a resource interaction over a WebSocket connection.
Subscriptions created with this hook are lightweight, share a single WebSocket connection, and are automatically untracked and cleaned up when the containing component is no longer mounted.
function MyComponent(): JSX.Element {
const [notificationCount, setNotificationCount] = useState(0);
useSubscription(
'Communication?sender=Practitioner/abc-123&recipient=Practitioner/me-456',
(bundle: Bundle) => {
console.log('Received a message from Practitioner/abc-123!');
handleNotificationBundle(bundle); // Do something with the bundle
setNotificationCount(s => s + 1);
}
);
return <div>Notifications received: {notificationCount}</div>;
}
Any Subscription extension supported by Medplum can be attached to a Subscription
created by the useSubscription
hook via a 3rd optional parameter to the hook, options
, which takes an optional subscriptionProps
.
type UseSubscriptionOptions = {
subscriptionProps?: Partial<Subscription>;
}
Here's how you would subscribe to only create
interactions for a criteria:
const createOnlyOptions = {
subscriptionProps: {
extension: [
{
url: 'https://medplum.com/fhir/StructureDefinition/subscription-supported-interaction',
valueCode: 'create',
},
],
}
};
function MyComponent(): JSX.Element {
const [createCount, setCreateCount] = useState(0);
useSubscription(
'Communication?sender=Practitioner/abc-123&recipient=Practitioner/me-456',
(_bundle) => {
console.log('Received a new message from Practitioner/abc-123!');
setCreateCount(s => s + 1);
},
createOnlyOptions,
);
return <div>Create notifications received: {createCount}</div>;
}
Subscriptions with the same criteria are tracked separately if they have differing subscriptionProps
. This means you can create one Subscription
to listen for create
interactions and another for update
interactions and they will not interfere with each other.
const createOnlyOptions = {
subscriptionProps: {
extension: [
{
url: 'https://medplum.com/fhir/StructureDefinition/subscription-supported-interaction',
valueCode: 'create',
},
],
}
};
const updateOnlyOptions = {
subscriptionProps: {
extension: [
{
url: 'https://medplum.com/fhir/StructureDefinition/subscription-supported-interaction',
valueCode: 'update',
},
],
}
};
function MyComponent(): JSX.Element {
const [createCount, setCreateCount] = useState(0);
const [updateCount, setUpdateCount] = useState(0);
useSubscription(
'Communication?sender=Practitioner/abc-123&recipient=Practitioner/me-456',
(_bundle) => {
console.log('Received a new message from Practitioner/abc-123!');
setCreateCount(s => s + 1);
},
createOnlyOptions,
);
useSubscription(
'Communication?sender=Practitioner/abc-123&recipient=Practitioner/me-456',
(_bundle) => {
console.log('Received an update to message from Practitioner/abc-123!');
setUpdateCount(s => s + 1);
},
updateOnlyOptions,
);
return (
<>
<div>Create notifications received: {createCount}</div>
<div>Update notifications received: {updateCount}</div>
</>
);
}
Expo
appUsage within Expo
/ React Native
has some special considerations. See: @medplum/expo-polyfills README
Medplum is a healthcare platform that helps you quickly develop high-quality compliant applications. Medplum includes a FHIR server, React component library, and developer app.
Apache 2.0. Copyright © Medplum 2024
FAQs
Medplum React Hooks Library
The npm package @medplum/react-hooks receives a total of 764 weekly downloads. As such, @medplum/react-hooks popularity was classified as not popular.
We found that @medplum/react-hooks demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.