uilabs utils

A tiny utility library for React.

Installation

npm install @uilabs/utils

Usage

Utils

cn

import { cn } from "@uilabs/utils";

const Component = ({ className }: { className?: string }) => (
  <p className={cn("text-red-400 text-center", className)}>Hello, world!</p>
);

Hooks

useDebounce

import { useDebounce } from "@uilabs/utils";

const Component = () => {
  const [value, setValue] = useState("");
  const { debouncedValue, cancel, isPending } = useDebounce(value, 500);

  useEffect(() => {
    console.log("Debounced value:", debouncedValue);
  }, [debouncedValue]);

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Search..."
      />
      <button onClick={cancel}>Cancel</button>
      {isPending() ? <p>isPending</p>}
    </div>
  );
};