splitProps

Splits props into one getter-preserving object per key list, followed by an object holding every other key. Each group reads its keys from props at access time, so reactivity is preserved. A key listed in two groups appears in both and never in the rest. A listed key that props does not have is still present in its group, as undefined. Use it to separate the props a component consumes from the ones it forwards to an element.

Import#

import { splitProps } from "@shadow-js/core";

Signature#

function splitProps<T extends object, const K extends readonly (readonly (keyof T)[])[]>(
  props: T,
  ...keys: K
): SplitProps<T, K>

Parameters#

Returns#

[...groups, rest], in the order the key lists were given.

Examples#

import { splitProps } from "@shadow-js/core";

function Field(props: { label: string; value: string; placeholder?: string }) {
  const [own, input] = splitProps(props, ["label"]);
  return (
    <label>
      {own.label}
      <input {...input} />
    </label>
  );
}