Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/docs/lifecycle/hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 15 additions & 0 deletions src/docs/options/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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
Expand Down
Loading