Get Started
Components
Styling
Theming

splitProps

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

Usage

text-field.tsx
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:

NameDefaultDescription
propsThe Object to compare against.
keysA 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