useControllableState

React hook used to allow component to be controlled and uncontrolled modes, and provide control over it's internal state.

Most Chakra components utilize useControllableState for seamlessly managing regardless of whether it's controlled or uncontrolled.

Import#

import { useControllableState } from "@chakra-ui/core"

Signature#

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

const [value, setValue] = useControllableState(options)

Basic usage#

Using this hook lets you use the initial state by default with an option to control the state via control props (using value).

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>
  )
}

Here's an example of an 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>
  )
}

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.

Props#