React hook that allows any component handle controlled and uncontrolled modes, and provide control over its internal state.

Most Chakra components use the useControllableState for seamlessly managing both controlled or uncontrolled state scenarios.

Import

import { useControllableProp, useControllableState } from '@passfort/castle'
content_copy
Copy

useControllableProp

Given a prop value and state value, the useControllableProp hook is used to determine whether a component is controlled or uncontrolled, and also returns the computed value.

• It returns the prop value if the component is controlled
• It returns the state value if the component is uncontrolled

Usage

// propValue is the value passed to the component
const [isControlled, value] = useControllableProp(propValue, stateValue)
content_copy
Copy

useControllableState

The useControllableState hook returns the state and function that updates the state, just like React.useState does.

const [value, setValue] = useControllableState(options)
content_copy
Copy

Usage

With useControllableState, you can pass an initial state (using defaultValue) implying the component is uncontrolled, or you can pass a controlled value (using value) implying the component is controlled.

Here's an example of an uncontrolled state.

function Example() {
  const [value, setValue] = useControllableState({ defaultValue: 40 })
  return (
    <div>
      <Button onClick={() => setValue(value + 1)}>+</Button>
      <Box as="span" w="200px" mx="24px">
        {value}
      </Box>
      <Button onClick={() => setValue(value - 1)}>-</Button>
    </div>
  )
}
function Example() {
  const [value, setValue] = useControllableState({ defaultValue: 40 })
  return (
    <div>
      <Button onClick={() => setValue(value + 1)}>+</Button>
      <Box as="span" w="200px" mx="24px">
        {value}
      </Box>
      <Button onClick={() => setValue(value - 1)}>-</Button>
    </div>
  )
}
content_copy
Copy
live example

Here's an example of a controlled state.

function Example() {
  // you need a state and updater to change the value
  const [value, setValue] = React.useState(40)

  const [internalValue, setInternalValue] = useControllableState({
    value,
    onChange: setValue,
  })

  return (
    <div>
      <Button onClick={() => setInternalValue(value + 1)}>+</Button>
      <Box as="span" w="200px" mx="24px">
        {internalValue}
      </Box>
      <Button onClick={() => setInternalValue(value - 1)}>-</Button>
    </div>
  )
}
function Example() {
  // you need a state and updater to change the value
  const [value, setValue] = React.useState(40)

  const [internalValue, setInternalValue] = useControllableState({
    value,
    onChange: setValue,
  })

  return (
    <div>
      <Button onClick={() => setInternalValue(value + 1)}>+</Button>
      <Box as="span" w="200px" mx="24px">
        {internalValue}
      </Box>
      <Button onClick={() => setInternalValue(value - 1)}>-</Button>
    </div>
  )
}
content_copy
Copy
live example

Contextual feedback and State updates

This hook provides helpful error or warning messages when you switch between controlled or uncontrolled modes or when you attempt to update the defaultValue passed.