splitProps

A utility for splitting props into groups. Inspired by SolidJS.

Usage

import { FieldParts, splitProps } from '@cerberus/react'

function TextField(props: TextFieldProps) {
  const [rootProps, { size }, textFieldProps] = splitProps(
    props,
    ['required', 'readOnly', 'disabled', 'invalid', 'ids'],
    ['size'],
    ['helperText', 'errorText', 'label'],
  )

  return (
    <FieldParts.Root {...rootProps} size={size}>
      <FieldParts.Label>
        {textFieldProps.label}
        <Show when={rootProps.required}>
          <span data-part="required-text">(required)</span>
        </Show>
      </FieldParts.Label>

      <FieldParts.Input {...props.inputProps} size={size} />
      <FieldParts.HelperText>{textFieldProps.helperText}</FieldParts.HelperText>
      <FieldParts.ErrorText>{textFieldProps.errorText}</FieldParts.ErrorText>
    </FieldParts.Root>
  )
}

API

function splitProps<T, U extends string>(
  props: T,
  ...keys: [U[]] | [U[], U[]] | [U[], U[], U[]]
): [
  T,
  Partial<Pick<T, Extract<keyof T, U>>>,
  Partial<Pick<T, Exclude<keyof T, U>>>,
]

Arguments

The splitProps utility accepts the following arguments:

Name	Default	Description
props		The Object to compare against.
keys		A list of keys to split into a group.

Returns

The splitProps utility returns an Array of the provided keys converted into an Object groups. What is left over is returned as the final Object in the array.

On this page

Edit this page on Github