splitProps

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

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.