@outbook/hooks

Custom hooks for web components built with Haunted.

useLangObserver

A custom hook to observe changes to the lang attribute on a custom element. It provides the current language of the element, falling back to a default if lang is not set.

Usage

import { component, html } from 'haunted';
import { useLangObserver } from '@outbook/hooks';

function MyElement() {
  const element = this; // 'this' refers to the custom element instance
  const currentLang = useLangObserver(element, 'en');

  // You can now use 'currentLang' in your component's logic or render method
  console.log('Current language:', currentLang);

  return html`<p>Hello in ${currentLang}!</p>`;
}

customElements.define('my-element', component(MyElement));

Parameters

• element: The custom element to observe.
• defaultLang: (Optional) The default language to use if the lang attribute is not set on the element. Defaults to 'en'.

Returns

• string: The current language of the element.

License

Apache 2.0