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.

useAssets¶

Location¶

@web/core/assets

Description¶

See the section on lazy loading assets for more details.

useAutofocus¶

Location¶

@web/core/utils/hooks

Description¶

Focus an element referenced by a t-ref=»autofocus» in the current component as soon as it appears in the DOM and if it was not displayed before.

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

class Comp {
  setup() {
    this.inputRef = useAutofocus();
  }
  static template = "Comp";
}

<t t-name="Comp">
  <input t-ref="autofocus" type="text"/>
</t>

API¶

useAutofocus()¶

Devuelve

the element reference.

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)¶

Argumentos

• 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)¶

Argumentos

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

usePosition¶

Location¶

@web/core/position_hook

Description¶

Helps positioning an HTMLElement (the popper) relatively to another HTMLElement (the reference). This hook ensures the positioning is updated when the window is resized/scrolled.

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

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

API¶

usePosition(reference[, options])¶

Argumentos

• reference (HTMLElement or ()=>HTMLElement()) – the target HTMLElement to be positioned from

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

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

class DropMenu extends owl.Component {
  setup() {
    const toggler = owl.useRef("toggler");
    usePosition(
      () => toggler.el,
      {
        popper: "menu",
        position: "right-start",
        onPositioned: (el, { direction, variant }) => {
          el.classList.add(`dm-${direction}`); // -> "dm-top" "dm-right" "dm-bottom" "dm-left"
          el.style.backgroundColor = variant === "middle" ? "red" : "blue";
        },
      },
    );
  }
}
DropMenu.template = owl.tags.xml`
  <button t-ref="toggler">Toggle Menu</button>
  <div t-ref="menu">
    <t t-slot="default">
      This is the menu default content.
    </t>
  </div>
`;

useSpellCheck¶

Location¶

@web/core/utils/hooks

Description¶

Activate the spellcheck state to an input or textarea on focus by a t-ref="spellcheck" in the current component. This state is then removed on blur, as well as the red outline, which improves readability of the content.

The hook can also be used on any HTML element with the contenteditable attribute. To disable spellcheck completely on elements that might be enabled by the hook, set explicitly the spellcheck attribute as false on the element.

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

class Comp {
  setup() {
    this.simpleRef = useSpellCheck();
    this.customRef = useSpellCheck({ refName: "custom" });
    this.nodeRef = useSpellCheck({ refName: "container" });
  }
  static template = "Comp";
}

<t t-name="Comp">
  <input t-ref="spellcheck" type="text"/>
  <textarea t-ref="custom"/>
  <div t-ref="container">
    <input type="text" spellcheck="false"/>
    <div contenteditable="true"/>
  </div>
</t>

API¶

useSpellCheck([options])¶

Argumentos

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