use Subscription()React Hook
Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout.
You generally shouldn’t need to use this directly, as there are dedicated hooks for accessing the current value of each individual resource in the checkout.
Anchor to useSubscription-parametersParameters
- Anchor to subscriptionsubscriptionStatefulRemoteSubscribable<Value>required
UseSubscriptionGeneratedType
Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout. > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout.
- subscription
StatefulRemoteSubscribable<Value>
Value
export function useSubscription<Value>(
subscription: StatefulRemoteSubscribable<Value>,
): Value {
const [, setValue] = useState(subscription.current);
useEffect(() => {
let didUnsubscribe = false;
const checkForUpdates: Subscriber<Value> = (newValue) => {
if (didUnsubscribe) {
return;
}
setValue(newValue);
};
const unsubscribe = subscription.subscribe(checkForUpdates);
// Because we're subscribing in a passive effect,
// it's possible for an update to occur between render and the effect handler.
// Check for this and schedule an update if work has occurred.
checkForUpdates(subscription.current);
return () => {
didUnsubscribe = true;
unsubscribe();
};
}, [subscription]);
return subscription.current;
}
Subscribing to changes
React
examples
Subscribing to changes
React
import { reactExtension, Banner, useApi, useSubscription, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { const {cost} = useApi(); // Equivalent to the useTotalAmount() hook to subscribe and re-render your extension on changes const totalAmount = useSubscription( cost.totalAmount, ); return <Banner>{totalAmount.amount}</Banner>; }