@medplum/react-hooks 3.2.18 → 3.2.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +8 -108
  2. package/package.json +8 -8
package/README.md CHANGED
@@ -71,16 +71,13 @@ interface MedplumContext {
71
71
  ```
72
72
 
73
73
  ### Using `loading` to know when `MedplumClient` initialization is done
74
+
74
75
  You 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.
75
76
 
76
77
  ```tsx
77
78
  function MyComponent(): JSX.Element {
78
79
  const { loading } = useMedplumContext();
79
- return loading ? (
80
- <Spinner />
81
- ) : (
82
- <div>Loaded!</div>
83
- );
80
+ return loading ? <Spinner /> : <div>Loaded!</div>;
84
81
  }
85
82
  ```
86
83
 
@@ -94,114 +91,17 @@ Subscriptions created with this hook are lightweight, share a single WebSocket c
94
91
  function MyComponent(): JSX.Element {
95
92
  const [notificationCount, setNotificationCount] = useState(0);
96
93
 
97
- useSubscription(
98
- 'Communication?sender=Practitioner/abc-123&recipient=Practitioner/me-456',
99
- (bundle: Bundle) => {
100
- console.log('Received a message from Practitioner/abc-123!');
101
- handleNotificationBundle(bundle); // Do something with the bundle
102
- setNotificationCount(s => s + 1);
103
- }
104
- );
94
+ useSubscription('Communication?sender=Practitioner/abc-123&recipient=Practitioner/me-456', (bundle: Bundle) => {
95
+ console.log('Received a message from Practitioner/abc-123!');
96
+ handleNotificationBundle(bundle); // Do something with the bundle
97
+ setNotificationCount((s) => s + 1);
98
+ });
105
99
 
106
100
  return <div>Notifications received: {notificationCount}</div>;
107
101
  }
108
102
  ```
109
103
 
110
- ### Subscription Extensions
111
-
112
- Any [Subscription extension](https://www.medplum.com/docs/subscriptions/subscription-extensions) 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`.
113
-
114
- ```tsx
115
- type UseSubscriptionOptions = {
116
- subscriptionProps?: Partial<Subscription>;
117
- }
118
- ```
119
-
120
- Here's how you would subscribe to only `create` interactions for a criteria:
121
-
122
- ```tsx
123
- const createOnlyOptions = {
124
- subscriptionProps: {
125
- extension: [
126
- {
127
- url: 'https://medplum.com/fhir/StructureDefinition/subscription-supported-interaction',
128
- valueCode: 'create',
129
- },
130
- ],
131
- }
132
- };
133
-
134
- function MyComponent(): JSX.Element {
135
- const [createCount, setCreateCount] = useState(0);
136
-
137
- useSubscription(
138
- 'Communication?sender=Practitioner/abc-123&recipient=Practitioner/me-456',
139
- (_bundle) => {
140
- console.log('Received a new message from Practitioner/abc-123!');
141
- setCreateCount(s => s + 1);
142
- },
143
- createOnlyOptions,
144
- );
145
-
146
- return <div>Create notifications received: {createCount}</div>;
147
- }
148
- ```
149
-
150
- 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.
151
-
152
- ```tsx
153
- const createOnlyOptions = {
154
- subscriptionProps: {
155
- extension: [
156
- {
157
- url: 'https://medplum.com/fhir/StructureDefinition/subscription-supported-interaction',
158
- valueCode: 'create',
159
- },
160
- ],
161
- }
162
- };
163
-
164
- const updateOnlyOptions = {
165
- subscriptionProps: {
166
- extension: [
167
- {
168
- url: 'https://medplum.com/fhir/StructureDefinition/subscription-supported-interaction',
169
- valueCode: 'update',
170
- },
171
- ],
172
- }
173
- };
174
-
175
- function MyComponent(): JSX.Element {
176
- const [createCount, setCreateCount] = useState(0);
177
- const [updateCount, setUpdateCount] = useState(0);
178
-
179
- useSubscription(
180
- 'Communication?sender=Practitioner/abc-123&recipient=Practitioner/me-456',
181
- (_bundle) => {
182
- console.log('Received a new message from Practitioner/abc-123!');
183
- setCreateCount(s => s + 1);
184
- },
185
- createOnlyOptions,
186
- );
187
-
188
- useSubscription(
189
- 'Communication?sender=Practitioner/abc-123&recipient=Practitioner/me-456',
190
- (_bundle) => {
191
- console.log('Received an update to message from Practitioner/abc-123!');
192
- setUpdateCount(s => s + 1);
193
- },
194
- updateOnlyOptions,
195
- );
196
-
197
- return (
198
- <>
199
- <div>Create notifications received: {createCount}</div>
200
- <div>Update notifications received: {updateCount}</div>
201
- </>
202
- );
203
- }
204
- ```
104
+ See also: [`useSubscription` docs](https://www.medplum.com/docs/react/use-subscription)
205
105
 
206
106
  ### Usage within `Expo` app
207
107
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@medplum/react-hooks",
3
- "version": "3.2.18",
3
+ "version": "3.2.19",
4
4
  "description": "Medplum React Hooks Library",
5
5
  "keywords": [
6
6
  "medplum",
@@ -58,15 +58,15 @@
58
58
  "test": "jest"
59
59
  },
60
60
  "devDependencies": {
61
- "@medplum/core": "3.2.18",
62
- "@medplum/definitions": "3.2.18",
63
- "@medplum/fhirtypes": "3.2.18",
64
- "@medplum/mock": "3.2.18",
61
+ "@medplum/core": "3.2.19",
62
+ "@medplum/definitions": "3.2.19",
63
+ "@medplum/fhirtypes": "3.2.19",
64
+ "@medplum/mock": "3.2.19",
65
65
  "@testing-library/dom": "10.4.0",
66
- "@testing-library/jest-dom": "6.6.2",
66
+ "@testing-library/jest-dom": "6.6.3",
67
67
  "@testing-library/react": "16.0.1",
68
68
  "@types/jest": "29.5.14",
69
- "@types/node": "22.8.1",
69
+ "@types/node": "22.8.7",
70
70
  "@types/react": "18.3.12",
71
71
  "@types/react-dom": "18.3.1",
72
72
  "jest": "29.7.0",
@@ -78,7 +78,7 @@
78
78
  "typescript": "5.6.3"
79
79
  },
80
80
  "peerDependencies": {
81
- "@medplum/core": "3.2.18",
81
+ "@medplum/core": "3.2.19",
82
82
  "react": "^17.0.2 || ^18.0.0",
83
83
  "react-dom": "^17.0.2 || ^18.0.0"
84
84
  },