@shopify/app-bridge
Version:
**[Join our team and work on libraries like this one.](https://www.shopify.ca/careers)**
50 lines (49 loc) • 1.9 kB
TypeScript
import { HooksInterface, LifecycleHandler, LifecycleHook } from './types';
/**
* Shopify App Bridge can be extended with hooks, which run when actions are dispatched and updated.
* Hooks are middleware functions that can modify or cancel actions.
*
* The [validation middleware](../validate/README.md) is implemented using hooks.
*
* @remarks
* Here’s an example hook that modifies all Toast show actions to have a duration of five seconds.
*
* ```ts
* import createApp, {LifecycleHook, DispatchActionHook} from '@shopify/app-bridge';
* import {Toast} from '@shopify/app-bridge/actions'
*
* const app = createApp({apiKey: API_KEY, host: HOST});
*
* function makeToastsFiveSeconds: DispatchActionHook(next) {
* return function(action){
* if(action.type === Toast.Action.SHOW) {
* const modifiedAction = {
* ...action,
* payload: {
* ...action.payload,
* duration: 5000,
* },
* };
* return next(modifiedAction);
* } else {
* // don’t modify non-Toast actions
* return next(action);
* }
* }
* }
*
* app.hooks.set(LifecycleHook.DispatchAction, makeToastsFiveSeconds);
* ```
*
* The hook function `makeToastsFiveSeconds()` takes a `next()` function as its argument.
* The hook function returns an anonymous function, which takes the action being dispatched as its argument.
*
* To modify an action, call `next()` with the modified action, as in the example.
* To cancel an action, don’t call `next()`, and the action will not be dispatched.
*/
export default class Hooks implements HooksInterface {
private map;
set(hook: LifecycleHook, handler: LifecycleHandler): () => boolean;
get(hook: LifecycleHook): LifecycleHandler[] | undefined;
run<C>(hook: LifecycleHook, final: Function, context: C, ...initialArgs: any[]): any;
}