How to use @commercetools-uikit/hooks - 10 common examples

const LocalizedMoneyInput = props => {
  const intl = useIntl();

  const defaultExpansionState =
    props.hideCurrencyExpansionControls ||
    props.defaultExpandCurrencies ||
    // default to `false`, because useToggleState defaults to `true`
    false;

  const [areCurrenciesExpanded, toggleCurrencies] = useToggleState(
    defaultExpansionState
  );

  const id = useFieldId(props.id, sequentialId);

  const hasErrorInRemainingCurrencies =
    props.hasError ||
    getHasErrorOnRemainingLanguages(props.errors, props.selectedCurrency);

  const hasWarningInRemainingCurrencies =
    props.hasWarning ||
    getHasWarningOnRemainingLanguages(props.warnings, props.selectedCurrency);

  if (hasErrorInRemainingCurrencies || hasWarningInRemainingCurrencies) {
    // this update within render replaces the old `getDerivedStateFromProps` functionality
    // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops

const UncontrolledCollapsibleMotion = props => {
  const [isOpen, toggle] = useToggleState(!props.isDefaultClosed);

  const [
    animation,
    containerStyles,
    animationToggle,
    registerContentNode,
  ] = useToggleAnimation(isOpen, toggle, props.minHeight);

  return (
    
      {({ css }) => {
        let animationStyle = {};

        if (animation) {
          // By calling `css`, emotion injects the required CSS into the document head.
          // eslint-disable-next-line no-unused-expressions

const [
    expandedTranslationsState,
    expandedTranslationsDispatch,
  ] = React.useReducer(
    expandedTranslationsReducer,
    initialExpandedTranslationsState
  );

  const defaultExpansionState =
    props.hideLanguageExpansionControls ||
    props.defaultExpandLanguages ||
    // useToggleState's default is `true`, but we want `false`
    false;

  const [areLanguagesOpened, toggleLanguages] = useToggleState(
    defaultExpansionState
  );

  const toggleLanguage = React.useCallback(
    language => {
      expandedTranslationsDispatch({ type: 'toggle', payload: language });
    },
    [expandedTranslationsDispatch]
  );

  const languages = sortLanguages(
    props.selectedLanguage,
    Object.keys(props.value)
  );

  const hasErrorInRemainingLanguages =

const [
    expandedTranslationsState,
    expandedTranslationsDispatch,
  ] = React.useReducer(
    expandedTranslationsReducer,
    initialExpandedTranslationsState
  );

  const defaultExpansionState =
    props.hideLanguageExpansionControls ||
    props.defaultExpandLanguages ||
    // useToggleState's default is `true`, but we want `false`
    false;

  const [areLanguagesOpened, toggleLanguages] = useToggleState(
    defaultExpansionState
  );

  const toggleLanguage = React.useCallback(
    language => {
      expandedTranslationsDispatch({ type: 'toggle', payload: language });
    },
    [expandedTranslationsDispatch]
  );

  const languages = sortLanguages(
    props.selectedLanguage,
    Object.keys(props.value)
  );

  const hasErrorInRemainingLanguages =

const MultilineTextInput = props => {
  const intl = useIntl();

  const [contentRowCount, setContentRowCount] = React.useState(
    MultilineTextInput.MIN_ROW_COUNT
  );

  const [isOpen, toggle] = useToggleState(props.defaultExpandMultilineText);

  const { onFocus } = props;
  const handleFocus = React.useCallback(() => {
    if (!isOpen) toggle();
    if (onFocus) onFocus();
  }, [isOpen, onFocus, toggle]);

  const handleHeightChange = React.useCallback(
    (_, innerComponent) => {
      setContentRowCount(innerComponent.valueRowCount);
    },
    [setContentRowCount]
  );

  // This checks if the content in the textarea overflows the minimum
  // amount of lines it should have when collapsed

const LocalizedTextInput = props => {
  const defaultExpansionState =
    props.hideLanguageExpansionControls ||
    props.defaultExpandLanguages || // default to `false`, because useToggleState defaults to `true`
    false;

  const [areLanguagesExpanded, toggleLanguages] = useToggleState(
    defaultExpansionState
  );

  const languages = sortLanguages(
    props.selectedLanguage,
    Object.keys(props.value)
  );

  const id = useFieldId(props.id, sequentialId);

  const hasErrorInRemainingLanguages =
    props.hasError ||
    getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);

  if (hasErrorInRemainingLanguages) {
    // this update within render replaces the old `getDerivedStateFromProps` functionality

const LocalizedTextInput = props => {
  const defaultExpansionState =
    props.hideLanguageExpansionControls ||
    props.defaultExpandLanguages || // default to `false`, because useToggleState defaults to `true`
    false;

  const [areLanguagesExpanded, toggleLanguages] = useToggleState(
    defaultExpansionState
  );

  const languages = sortLanguages(
    props.selectedLanguage,
    Object.keys(props.value)
  );

  const id = useFieldId(props.id, sequentialId);

  const hasErrorInRemainingLanguages =
    props.hasError ||
    getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);

  if (hasErrorInRemainingLanguages) {
    // this update within render replaces the old `getDerivedStateFromProps` functionality
    // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
    if (hasErrorInRemainingLanguages !== areLanguagesExpanded) {
      toggleLanguages();
    }
  }

  return (

const LocalizedMoneyInput = props => {
  const intl = useIntl();

  const defaultExpansionState =
    props.hideCurrencyExpansionControls ||
    props.defaultExpandCurrencies ||
    // default to `false`, because useToggleState defaults to `true`
    false;

  const [areCurrenciesExpanded, toggleCurrencies] = useToggleState(
    defaultExpansionState
  );

  const id = useFieldId(props.id, sequentialId);

  const hasErrorInRemainingCurrencies =
    props.hasError ||
    getHasErrorOnRemainingLanguages(props.errors, props.selectedCurrency);

  const hasWarningInRemainingCurrencies =
    props.hasWarning ||
    getHasWarningOnRemainingLanguages(props.warnings, props.selectedCurrency);

  if (hasErrorInRemainingCurrencies || hasWarningInRemainingCurrencies) {
    // this update within render replaces the old `getDerivedStateFromProps` functionality
    // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
    if (!areCurrenciesExpanded) {
      toggleCurrencies();
    }
  }

const PrimaryActionDropdown = props => {
  const ref = React.useRef();
  const [isOpen, toggle] = useToggleState(false);

  const handleGlobalClick = React.useCallback(
    event => {
      const dropdownButton = ref.current;
      if (
        dropdownButton &&
        event.target !== dropdownButton &&
        !dropdownButton.contains(event.target)
      ) {
        toggle(false);
      }
    },
    [ref, toggle]
  );
  React.useEffect(() => {
    window.addEventListener('click', handleGlobalClick);

const PasswordField = props => {
  const intl = useIntl();
  const [isPasswordVisible, togglePasswordVisibility] = useToggleState(false);
  const id = useFieldId(props.id, sequentialId);
  const hasError = props.touched && hasErrors(props.errors);

  return (