Cerberus Design System

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.