diff --git a/src/docs/lifecycle/hooks.md b/src/docs/lifecycle/hooks.md index 31536e3f..65d28f68 100644 --- a/src/docs/lifecycle/hooks.md +++ b/src/docs/lifecycle/hooks.md @@ -181,6 +181,33 @@ swup.hooks.on('animation:in:end', () => { }); ``` +## Set all hook handlers at once + +When creating a swup instance, you can register all your hook handlers at once by passing a keyed +object into the instance options. + +```javascript +const swup = new Swup({ + hooks: { + 'visit:start': () => console.log('starting visit'), + 'page:load': () => console.log('loaded page'), + 'visit:end': () => console.log('finished visit') + } +}) +``` + +Hook handler options like `once` or `before` can be set by appending them to the hook name, +separated by a dot: `content:replace.before`, `fetch:error.once`, etc. + +```javascript +const swup = new Swup({ + hooks: { + 'visit:start.once': () => console.log('triggers once'), + 'content:replace.before': () => console.log('triggers before hook') + } +}) +``` + ## DOM events All hooks are also triggered on the `document` with a `swup:` prefix. They receive the hook name diff --git a/src/docs/options/options.md b/src/docs/options/options.md index db879819..c5b31604 100644 --- a/src/docs/options/options.md +++ b/src/docs/options/options.md @@ -24,6 +24,7 @@ const swup = new Swup({ animationScope: 'html', cache: true, containers: ['#swup'], + hooks: {}, ignoreVisit: (url, { el } = {}) => el?.closest('[data-no-swup]'), linkSelector: 'a[href]', linkToSelf: 'scroll', @@ -109,6 +110,20 @@ to `true`. } ``` +## hooks + +An object of [hook handlers](/hooks/) to register. For details and a few more examples, +see the section on [registering all hooks handlers at once](http://localhost:8080/hooks/#set-all-hook-handlers-at-once). + +```javascript +{ + hooks: { + 'visit:start': () => console.log('start'), + 'visit:end': () => console.log('end') + } +} +``` + ## ignoreVisit Allows ignoring specific visits via callback. By default, swup will ignore links with a