Hooks

Owl hooks are a way to factorize code, even if it depends on some component lifecycle. Most hooks provided by Owl are related to the lifecycle of a component, but some of them (such as useComponent) provide a way to build specific hooks.

Using these hooks, it is possible to build many customized hooks that help solve a specific problem, or make some common tasks easier. The rest of this page documents the list of hooks provided by the Odoo web framework.

Name

Short Description

useAssets

load assets

useBus

subscribe and unsubscribe to a bus

usePager

Display the pager of the control panel of a view.

usePosition

position an element relative to a target

useAssets

Location

@web/core/assets

Description

See the section on lazy loading assets for more details.

useBus

Location

@web/core/utils/hooks

Description

Add and clear an event listener to a bus. This hook ensures that the listener is properly cleared when the component is unmounted.

import { useBus } from "@web/core/utils/hooks";

class MyComponent {
  setup() {
    useBus(this.env.bus, "some-event", event => {
      console.log(event);
    });
  }
}

API

useBus(bus, eventName, callback)
Arguments
  • bus (EventBus()) – the target event bus

  • eventName (string()) – the name of the event that we want to listen to

  • callback (function()) – listener callback

usePager

Location

@web/search/pager_hook

Description

Display the Pager of the control panel of a view. This hooks correctly sets env.config to provide the props to the pager.

import { usePager } from "@web/search/pager_hook";

class CustomView {
  setup() {
    const state = owl.hooks.useState({
      offset: 0,
      limit: 80,
      total: 50,
    });
    usePager(() => {
      return {
        offset: this.state.offset,
        limit: this.state.limit,
        total: this.state.total,
        onUpdate: (newState) => {
          Object.assign(this.state, newState);
        },
      };
    });
  }
}

API

usePager(getPagerProps)
Arguments
  • getPagerProps (function()) – function that returns the pager props.

usePosition

Location

@web/core/position/position_hook

Description

Helps positioning a component (or a specific HTMLElement) relatively to a target HTMLElement. This hook ensures the positioning is updated when the window is resized/scrolled.

import { usePosition } from "@web/core/position/position_hook";

class MyPopover {
  setup() {
    // Here, the target is an HTMLElement
    usePosition(this.props.target);
  }
}
MyPopover.template = owl.tags.xml`<div>I am positioned through a wonderful hook!</div>`

Note

The following CSS classes can be used to style the target HTMLElement:

  • o-popper-position

  • o-popper-position--{D}{V} where {D} and {V} are replaced by the first letter of the corresponding Direction and Variant (see Options table below for valid directions and variants). E.g.: for position bottom-end, the class name will be o-popper-position--be.

API

usePosition(reference[, options])
Arguments
  • reference (HTMLElement or ()=>HTMLElement()) – the target HTMLElement to be positioned from

  • options (Options()) – the positioning options (see table below)

Option

Type

Description

popper

string | undefined

this is the element that will get positioned. You can provide here a useRef reference. If not provided, this.el is used (default: undefined).

container

HTMLElement

the container from which the popper is expected not to overflow. If overflowing occurs, other popper positions are tried until a not overflowing one is found. (default: the <html/> node)

margin

number

added margin between popper and reference elements (default: 0)

position

string

the desired position. It is a string composed of one direction and one variant separated by a dash character. Valid directions are: top, bottom, right, left. Valid variants are: start, middle, end. The variant can be omitted (default variant is middle). Examples of valid positions: right-end, top-start, left-middle, left. (default position: bottom)