inspreact

inspreact is a lightweight, TypeScript-first React utility library by inspectph. It provides commonly used hooks and helpers to speed up React development.

Table of Contents

• Installation
• Hooks
• Helpers
• Usage Example
• Contribution
• License

Installation

npm install inspreact
# or
yarn add inspreact

Hooks

useToggle

Toggle a boolean state.

import { useToggle } from "inspreact";
const [isOpen, toggleOpen] = useToggle(false);

useCounter

Counter with increment, decrement, and reset.

import { useCounter } from "inspreact";
const { count, increment, decrement, reset } = useCounter(0);

useLocalStorage

Sync state with localStorage.

import { useLocalStorage } from "inspreact";
const [name, setName] = useLocalStorage("name", "John Doe");

useDebounce

Debounce a value or callback.

import { useDebounce } from "inspreact";
const debouncedSearch = useDebounce(searchTerm, 500);

useWindowSize

Track window width and height.

import { useWindowSize } from "inspreact";
const { width, height } = useWindowSize();

useThrottle

Throttle a value or callback.

import { useThrottle } from "inspreact";
const throttledValue = useThrottle(value, 300);

usePrevious

Get the previous value of a state.

import { usePrevious } from "inspreact";
const prev = usePrevious(count);

useClickOutside

Detect clicks outside a DOM element.

import { useClickOutside } from "inspreact";
useClickOutside(ref, () => console.log("Clicked outside"));

useCopyToClipboard

Copy text to clipboard.

import { useCopyToClipboard } from "inspreact";
const [copied, copy] = useCopyToClipboard();
copy("Hello World");

useOnlineStatus

Detect online/offline status.

import { useOnlineStatus } from "inspreact";
const online = useOnlineStatus();
console.log(online ? "Online" : "Offline");

useTheme

Manage custom themes with persistence.

import { useTheme } from "inspreact";
const [theme, setTheme, toggle] = useTheme("light");
setTheme("blue");
toggle();

Persists the theme in localStorage and updates document.body.dataset.theme.

useTimeout

Declarative setTimeout.

import { useTimeout } from "inspreact";
useTimeout(() => console.log("Timeout!"), 1000);

useKeyPress

Detect key press events.

import { useKeyPress } from "inspreact";
const pressed = useKeyPress("Enter");

Helpers

deepClone

Deep copy an object or array.

import { deepClone } from "inspreact";
const copy = deepClone(obj);

isEmpty

Check if a value is empty (array, object, string, or null/undefined).

import { isEmpty } from "inspreact";
isEmpty([]); // true

randomId

Generate a random string ID.

import { randomId } from "inspreact";
const id = randomId(10);

classNames

Combine class names conditionally.

import { classNames } from "inspreact";
const btnClass = classNames("btn", isPrimary && "btn-primary");

truncate

Shorten text with ellipsis.

import { truncate } from "inspreact";
truncate("Hello World", 5); // "Hello…"

capitalize

Capitalize the first letter of a string.

import { capitalize } from "inspreact";
capitalize("hello"); // "Hello"

Usage Example

import {
  useThrottle,
  useCopyToClipboard,
  useTheme,
  deepClone,
} from "inspreact";

function App() {
  const [text, setText] = React.useState("");
  const throttledText = useThrottle(text, 500);
  const [copied, copy] = useCopyToClipboard();
  const [theme, setTheme, toggle] = useTheme("light");

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => copy(throttledText)}>
        {copied ? "Copied!" : "Copy"}
      </button>
      <p>Current theme: {theme}</p>
      <button onClick={() => toggle()}>Toggle Theme</button>
    </div>
  );
}

Contribution

PRs and suggestions are welcome! If you add new utilities, please follow TypeScript and React Hooks / Helper conventions.

⚖️ License

MIT License