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 |
---|---|
load assets |
|
subscribe and unsubscribe to a bus |
|
Display the pager of the control panel of a view. |
|
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 buseventName (
string()
) – the name of the event that we want to listen tocallback (
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 positionbottom-end
, the class name will beo-popper-position--be
.
API¶
- usePosition(reference[, options])¶
- Arguments
reference (
HTMLElement or ()=>HTMLElement()
) – the target HTMLElement to be positioned fromoptions (
Options()
) – the positioning options (see table below)
Option |
Type |
Description |
---|---|---|
|
string | undefined |
this is the element that will get positioned. You can provide here a
useRef reference.
If not provided, |
|
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 |
|
number |
added margin between popper and reference elements (default: |
|
string |
the desired position. It is a string composed of one direction and one
variant separated by a dash character. Valid directions are: |