Skip to main content

useControlledState

Check if a component is controlled or uncontrolled and returns the correct state value and setter accordingly. If the component state is controlled by the app, the setter is an empty function.

API​

function useControlledState<StateType>(defaultState: StateType | (() => StateType), state?: StateType, setState?: ((value: StateType) => void) | undefined): [StateType, SetState<StateType>];

Usage​

import { useControlledState } from '@jtmdias/js-utilities';


function Tabs(props) {
  ...
  /**
  * The selected index can be defined by the Tabs internal state or a parent.
  */
  const [selectedIndex, setSelectedIndex] = useControlledState(
    props.defaultIndex ?? DEFAULT_INITIAL_TAB_INDEX,
    props.controlledIndex,
  );
  ...