Merge pull request #205 from swup/content/hooks-option

Add documentation for `hooks` option

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

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