LifecycleCallback type

Home > @rimitive/view > LifecycleCallback

LifecycleCallback type

Lifecycle callback for element connection/disconnection

Signature:

export type LifecycleCallback<TElement> = (element: TElement) => void | (() => void);

Example

import { compose } from '@rimitive/core';
import { createDOMAdapter } from '@rimitive/view/adapters/dom';
import { createElModule } from '@rimitive/view/el';
import type { LifecycleCallback } from '@rimitive/view/types';

const adapter = createDOMAdapter();
const svc = compose(createElModule(adapter));
const { el } = svc;

// Simple callback
const autofocus: LifecycleCallback<HTMLInputElement> = (elem) => {
  elem.focus();
};

// Callback with cleanup
const trackResize: LifecycleCallback<HTMLElement> = (elem) => {
  const observer = new ResizeObserver(() => console.log('resized'));
  observer.observe(elem);
  return () => observer.disconnect();
};

el('input').ref(autofocus, trackResize)();