use-subscription
React Hook for subscribing to external data sources.
You may now migrate to use-sync-external-store
directly instead, which has the same API as React.useSyncExternalStore
. The use-subscription
package is now a thin wrapper over use-sync-external-store
and will not be updated further.
Installation
yarn add use-subscription
npm install use-subscription
Usage
To configure a subscription, you must provide two methods: getCurrentValue
and subscribe
.
In order to avoid removing and re-adding subscriptions each time this hook is called, the parameters passed to this hook should be memoized. This can be done by wrapping the entire subscription with useMemo()
, or by wrapping the individual callbacks with useCallback()
.
Subscribing to event dispatchers
Below is an example showing how use-subscription
can be used to subscribe to event dispatchers such as DOM elements.
import React, { useMemo } from "react";
import { useSubscription } from "use-subscription";
function Example({ input }) {
const subscription = useMemo(
() => ({
getCurrentValue: () => input.value,
subscribe: callback => {
input.addEventListener("change", callback);
return () => input.removeEventListener("change", callback);
}
}),
[input]
);
const value = useSubscription(subscription);
}
Subscribing to observables
Below are examples showing how use-subscription
can be used to subscribe to certain types of observables (e.g. RxJS BehaviorSubject
and ReplaySubject
).
Note that it is not possible to support all observable types (e.g. RxJS Subject
or Observable
) because some provide no way to read the "current" value after it has been emitted.
BehaviorSubject
const subscription = useMemo(
() => ({
getCurrentValue: () => behaviorSubject.getValue(),
subscribe: callback => {
const subscription = behaviorSubject.subscribe(callback);
return () => subscription.unsubscribe();
}
}),
[behaviorSubject]
);
const value = useSubscription(subscription);
ReplaySubject
const subscription = useMemo(
() => ({
getCurrentValue: () => {
let currentValue;
replaySubject
.subscribe(value => {
currentValue = value;
})
.unsubscribe();
return currentValue;
},
subscribe: callback => {
const subscription = replaySubject.subscribe(callback);
return () => subscription.unsubscribe();
}
}),
[replaySubject]
);
const value = useSubscription(subscription);