How to use the ui-box.splitBoxProps function in ui-box

To help you get started, we’ve selected a few ui-box examples, based on popular ways it is used in public projects.

github segmentio / evergreen / src / select / src / SelectField.js View on Github external
inputWidth,
      disabled,
      required,
      isInvalid,
      appearance,

      // Rest props are spread on the FormField
      ...props
    } = this.props

    const id = `SelectField-${this.state.id}`

    /**
     * Split the wrapper props from the input props.
     */
    const { matchedProps, remainingProps } = splitBoxProps(props)

    return (
      <FormField
        marginBottom={24}
        label={label}
        isRequired={required}
        hint={hint}
        description={description}
        validationMessage={validationMessage}
        labelFor={id}
        {...matchedProps}
      >
        <Select
          id={id}
          width={inputWidth}
          height={inputHeight}
github segmentio / evergreen / src / text-input / src / TextInputField.js View on Github external
required,
      isInvalid,
      appearance,
      placeholder,
      spellCheck,

      // Rest props are spread on the FormField
      ...props
    } = this.props

    const id = `TextInputField-${this.state.id}`

    /**
     * Split the wrapper props from the input props.
     */
    const { matchedProps, remainingProps } = splitBoxProps(props)

    return (
      <FormField
        marginBottom={24}
        label={label}
        isRequired={required}
        hint={hint}
        description={description}
        validationMessage={validationMessage}
        labelFor={id}
        {...matchedProps}
      >
        <TextInput
          id={id}
          width={inputWidth}
          height={inputHeight}
github segmentio / evergreen / src / search-input / src / SearchInput.js View on Github external
render() {
    const { theme, appearance, disabled, height, ...props } = this.props
    const { matchedProps, remainingProps } = splitBoxProps(props)
    const { width } = matchedProps
    const iconSize = theme.getIconSizeForInput(height)

    return (
      <Box
        position="relative"
        display="inline-flex"
        height={height}
        {...matchedProps}
      >
        <Box
          height={height}
          width={height}
          pointerEvents="none"
          position="absolute"
          display="flex"

ui-box

Blazing Fast React UI Primitive

MIT
Latest version published 3 months ago

Package Health Score

75 / 100
Full package analysis

Similar packages