HomeAboutCodes

IntroductionCSS FlexboxCSS Grid Layout

AccordionAspect RatioBadgeBreadcrumbButtonCarouselCheckboxDate PickerDialogDrawerFormHover CardPaginationPopoverSheetSkeletonSonnerSwitchTableTooltip

Background FireworksBackground HexagonBackground HoleBackground StartElement SpringLoadingProgress ScrollText HighlightText RollingText ShimmeringText SplittingText Typing

Sortable

useClickOutsideuseCopyToClipboarduseDebounceuseFetchuseIsClientuseLocalStorageuseMediaQueryusePrevioususeToggleuseUnmount

Import

1import useToggle from "@repo/ui/hooks/use-toggle";

Usage

1const [isModalOpen, toggleModal] = useToggle();
2
3return (
4  <div>
5    <button onClick={toggleModal}>Toggle Modal</button>
6    {isModalOpen && <p>Modal Content</p>}
7  </div>
8);

Original

1import { useState } from "react";
2
3function useToggle(initialState = false) {
4  const [state, setState] = useState(initialState);
5
6  const toggle = () => setState((prev) => !prev);
7
8  return [state, toggle] as const;
9}
10
11export default useToggle;
usePrevioususeUnmount