Hooks

A “hook” is a regular method that is called at a specific time in the Barba lifecycle.

Hooks are triggered by Transitions and Views, but are not “shared” between them: they run separately, either synchronously or asynchronously using the common this.async() syntax (see run-async) or returning a promise.

Summary

1. Base hooks
2. Global hooks
3. Parameters

Base hooks

Barba uses a collection of base hooks:

Each hook run in a precise order. If the sync mode is enabled, as leave and enter will be concurrent, order will differ: first all before*, then enter/leave, and finally all after*.

You can define them in many different ways, depending on your code implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// using a promise (returned with arrow function)
leave: (data) => asyncAnimation(data.current.container)

// using a promise (with ES6 argument syntax)
leave: ({ current }) => asyncAnimation(current.container)

// using a promise (with a resolve call)
leave: (data) => {
  return new Promise(resolve => {
    callbackAnimation(data.current.container, {
      onComplete: () => {
        resolve();
      }
    });
  });
}

// `this.async()`
leave(data) {
  const done = this.async();

  callbackAnimation(data.current.container, {
    onComplete: () => {
      done();
    }
  });
}

// async/await
async leave(data) {
  await asyncAnimation(data.current.container);
}

Global hooks

In order to improve and optimize your code, Barba offer a way to define global hooks through barba.hooks. This will execute code everytime the hook is called in the lifecycle. What makes the hook global is that the definition is not wrap inside a Transition or a View. You can combine base and global hooks.

For example, if you want to display the namespace everytime you enter a new page, just do:

1
2
3

barba.hooks.enter((data) => {
  console.log(data.next.namespace);
});

Global hooks can be setup anywhere, before or after the barba.init() instruction.

Parameters

data argument

All hooks receive the same data argument object that contains current and next page properties.
This allows access to useful informations, like namespace, route or URL:

1
2
3
4
5
6
7
8

barba.init({
  transitions: [{
    leave(data) {
      // get the current URL
      let href = data.current.url.href;
    }
  }]
});

You can use ES6 shorthand argument syntax ({ current }) to easily access data.current inside the hook.

data properties

Properties attached to data object:

current/next properties

Properties attached to data.current and data.next objects:

According to the lifecycle, rules, sync mode or cache availability, some properties may be undefined.

url properties

Properties attached to data.current.url and data.next.url objects:

route properties

Properties attached to data.current.route and data.next.route objects:

route is only available when using @barba/router.