splitProps

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

The splitProps utility is used to split props into groups and based on the SolidJS reactive utility.

Usage

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

3
function TextField(props: TextFieldProps) {
4
  const [rootProps, { size }, textFieldProps] = splitProps(
5
    props,
6
    ['required', 'readOnly', 'disabled', 'invalid', 'ids'],
7
    ['size'],
8
    ['helperText', 'errorText', 'label'],
9
  )
10

11
  return (
12
    <FieldParts.Root {...rootProps} size={size}>
13
      <FieldParts.Label>
14
        {textFieldProps.label}
15
        <Show when={rootProps.required}>
16
          <span data-part="required-text">(required)</span>
17
        </Show>
18
      </FieldParts.Label>
19

20
      <FieldParts.Input {...props.inputProps} size={size} />
21
      <FieldParts.HelperText>{textFieldProps.helperText}</FieldParts.HelperText>
22
      <FieldParts.ErrorText>{textFieldProps.errorText}</FieldParts.ErrorText>
23
    </FieldParts.Root>
24
  )
25
}

API

1
function splitProps<T, U extends string>(
2
  props: T,
3
  ...keys: [U[]] | [U[], U[]] | [U[], U[], U[]]
4
): [
5
  T,
6
  Partial<Pick<T, Extract<keyof T, U>>>,
7
  Partial<Pick<T, Exclude<keyof T, U>>>,
8
]

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