Helpers API

Utility functions for props and elements.

splitProps

Splits props object into picked and omitted parts.

import { splitProps } from 'kaori.js';

function Button(allProps: ButtonProps & HTMLAttributes) {
  const [props, rest] = splitProps(allProps, ['children', 'class']);

  return () => (
    <button class={`btn ${props.class}`} {...rest}>
      {props.children}
    </button>
  );
}

Type Signature

function splitProps<T extends Record<string, any>, K extends keyof T>(
  props: T,
  keys: readonly K[]
): [Pick<T, K>, Omit<T, K>];

Parameters

• props - Props object to split
• keys - Array of keys to pick

Returns

Tuple of [picked, omitted] objects

mergeProps

Merges multiple props objects while preserving reactivity.

import { mergeProps } from 'kaori.js';

function Component(userProps: Props) {
  const defaults = { color: 'blue', size: 'medium' };
  const props = mergeProps(defaults, userProps);

  return () => <div style={{ color: props.color }}>{props.size}</div>;
}

Type Signature

function mergeProps(...props: any[]): any;

Parameters

• ...props - Props objects to merge (right overwrites left)

Returns

Merged props object

spread

Spreads props onto an element (used by compiler).

// Typically used via spread syntax
function Component(props: any) {
  return () => <div {...props}>Content</div>;
}

Type Signature

function spread(props: Record<string, any>): Directive;

TIP

You typically don't call spread directly. Use JSX spread syntax {...props} instead.

createRef

Creates a ref to access DOM elements.

import { createRef } from 'kaori.js';

function Component() {
  const divRef = createRef<HTMLDivElement>();

  onMount(() => {
    console.log(divRef.value); // Access DOM element
  });

  return () => <div ref={divRef}>Content</div>;
}

Type Signature

function createRef<T = Element>(): Ref<T>;

interface Ref<T = Element> {
  value?: T;
}