react-use#useToggle JavaScript Examples

The following examples show how to use react-use#useToggle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Table.jsx    From Turnip-Calculator with MIT License 6 votes vote down vote up 
AggregatedPatterns = ({ patterns, name, expanded }) => {
  const [open, toggleOpen] = useToggle(Boolean(expanded));
  if (!patterns.length) return null;
  if (patterns.length === 1) {
    return <PatternRow pattern={patterns[0]} name={name} />;
  }
  if (patterns.length > 1) {
    const aggregatedPattern = aggregate(patterns);
    return (
      <>
        <PatternRow
          name={name}
          onClick={toggleOpen}
          open={open}
          pattern={aggregatedPattern}
        />
        {open &&
          patterns.map((pattern) => (
            <PatternRow key={uuidv4()} name={`-`} pattern={pattern} />
          ))}
      </>
    );
  }
  return null;
}
Example #2
Source File: index.jsx    From botble-graphql-next with MIT License 5 votes vote down vote up 
Header = () => {
  const router = useRouter();

  const [toggle, toggleOpen] = useToggle(false);
  const isMobile = useMedia('(max-width: 700px)');

  useUpdateEffect(() => {
    if (isMobile) {
      toggleOpen(false);
    }
  }, [isMobile, router.asPath]);

  return (
    <header>
      <div className="container container-fluid px-2 lg:px-0">
        <div className="flex justify-between py-3 sm:py-6 select-none">
          <h1 className="text-3xl text-gray-700 font-semibold">
            <Link href="/">
              <a className="hover:no-underline">
                <span className="text-fresh-red">Tôi yêu</span> lập trình
              </a>
            </Link>
          </h1>
          <div className="flex items-center">
            {!isMobile && <Navigation />}
            <div className="flex ml-10 items-center">
              <Icon icon={iconSearchIcon} className="font-bold" height="18" />
              {isMobile && (
                <Icon
                  icon={toggle ? closeBig : menuIcon}
                  className="cursor-pointer ml-2 font-bold"
                  width="18"
                  height="16"
                  onClick={toggleOpen}
                />
              )}
            </div>
          </div>
        </div>
        {isMobile && toggle && <Navigation wide />}
      </div>
    </header>
  );
}