tri-hooks

A comprehensive, tree-shakable hooks library for React, Vue, and Angular with identical functionality and TypeScript support. Covers all major browser APIs and common frontend patterns.

🚀 Features

• Tree-shakable: Import only what you need
• Framework Agnostic: Same API across React, Vue, and Angular
• TypeScript Ready: Strictly typed with comprehensive type definitions
• Browser API Coverage: Implements all major browser APIs
• Production Ready: SSR-safe, proper cleanup, edge-case handling
• Performance Optimized: Efficient implementations with proper memoization
• Cross-Platform: Consistent behavior across all supported frameworks

📦 Installation

One install for everything:

npm install tri-hooks

There is only one package. After installing, you can use hooks in two ways:

| How you use it | What you do | |----------------|-------------| | All at once | Import many hooks from tri-hooks (React) or tri-hooks/vue or tri-hooks/angular | | Single hook (separately) | Import one hook from its path, e.g. tri-hooks/hooks/state-ui/useToggle/react — your bundle stays small (tree-shaking) |

Use all hooks at once (single import)

Import multiple hooks from the main package or from a framework-specific entry. Best when you use several hooks in the same app.

| Framework | Import from | Example | |-----------|-------------|---------| | React | tri-hooks or tri-hooks/react | import { useToggle, useClipboard } from 'tri-hooks' | | Vue | tri-hooks/vue | import { useToggle, useClipboard } from 'tri-hooks/vue' | | Angular | tri-hooks/angular | import { useToggle, useClipboard } from 'tri-hooks/angular' |

Use hooks separately (tree-shaking, smaller bundles)

Import only the hook you need from its path. Bundlers will include just that hook.

// React
import { useToggle } from 'tri-hooks/hooks/state-ui/useToggle/react';

// Vue
import { useToggle } from 'tri-hooks/hooks/state-ui/useToggle/vue';

// Angular
import { useToggle } from 'tri-hooks/hooks/state-ui/useToggle/angular';

| Use case | Recommendation | |----------|-----------------| | Use many hooks | Import from tri-hooks (React) or tri-hooks/vue or tri-hooks/angular | | Use one or two hooks, want smallest bundle | Import from the hook path, e.g. tri-hooks/hooks/state-ui/useToggle/react |

🎯 Categories

State & UI

• useToggle - Boolean state management
• useCounter - Numeric state management
• useBoolean - Enhanced boolean state management
• usePrevious - Previous value tracking
• useClipboard - Copy to clipboard
• useHover - Hover state for elements

Data & Async

• useDebounce - Function call debouncing
• useThrottle - Function call throttling
• useFetch - HTTP request management
• useAsync - Promise handling with loading/error states
• useSWR - Stale-while-revalidate data fetching strategy
• useInterval - Interval with cleanup
• useTimeout - Timeout with cleanup
• useIdle - User idle detection
• useDebouncedValue - Debounced value (e.g. search input)

DOM & Events

• useIntersectionObserver - Element visibility detection
• useResizeObserver - Element size monitoring
• useClickOutside - Outside click detection
• useKeyPress - Keyboard key press handler

Storage

• useLocalStorage - Persistent client-side storage

Device & Connectivity

• useNetwork - Network status monitoring
• useOnline - Online/offline status detection
• useBattery - Battery status monitoring
• useGeolocation - Geolocation tracking
• useMousePosition - Mouse position tracking
• useWindowSize - Window size monitoring

Animation

• useAnimationFrame - Animation frame management

Browser APIs

• usePageVisibility - Page visibility tracking
• useFullscreen - Fullscreen mode management
• useLockBodyScroll - Lock body scroll (modals)

Media

• useMediaQuery - CSS media query management
• usePreferredColorScheme - prefers-color-scheme (light/dark)

Notifications

• useToast - Toast notification management

Forms

• useValidation - Form field validation

🔧 Usage

React

All at once:

import { useToggle, useClipboard } from 'tri-hooks';
// or: import { useToggle, useClipboard } from 'tri-hooks/react';

function MyComponent() {
  const [value, toggle] = useToggle(false);
  const { copy, copied } = useClipboard();
  return (
    <button onClick={toggle}>{value ? 'ON' : 'OFF'}</button>
  );
}

Separately (tree-shaken):

import { useToggle } from 'tri-hooks/hooks/state-ui/useToggle/react';

function MyComponent() {
  const [value, toggle] = useToggle(false);
  return <button onClick={toggle}>{value ? 'ON' : 'OFF'}</button>;
}

Vue

All at once:

import { useToggle, useClipboard } from 'tri-hooks/vue';

export default {
  setup() {
    const { value, toggle } = useToggle(false);
    const { copy, copied } = useClipboard();
    return { value, toggle, copy, copied };
  },
};

Separately (tree-shaken):

import { useToggle } from 'tri-hooks/hooks/state-ui/useToggle/vue';

export default {
  setup() {
    const { value, toggle } = useToggle(false);
    return { value, toggle };
  },
};

Angular

All at once:

import { Component } from '@angular/core';
import { useToggle, useClipboard } from 'tri-hooks/angular';

@Component({
  selector: 'app-my-component',
  template: `<button (click)="toggle()">{{ value() ? 'ON' : 'OFF' }}</button>`,
})
export class MyComponent {
  private toggleHook = useToggle(false);
  clipboard = useClipboard();

  value = this.toggleHook.value;
  toggle = this.toggleHook.toggle;
}

Separately (tree-shaken):

import { Component } from '@angular/core';
import { useToggle } from 'tri-hooks/hooks/state-ui/useToggle/angular';

@Component({
  selector: 'app-my-component',
  template: `<button (click)="toggle()">{{ value() ? 'ON' : 'OFF' }}</button>`,
})
export class MyComponent {
  private toggleHook = useToggle(false);
  value = this.toggleHook.value;
  toggle = this.toggleHook.toggle;
}

🛠️ Framework-Specific Patterns

Angular Implementation Notes

• Signals First: Angular hooks prioritize signals for reactivity
• RxJS When Needed: Uses observables only when continuous streams or cancellation is required
• Injectable Services: Shared logic exposed as injectable services
• Minimal Observable Usage: Avoiding heavy RxJS unless necessary

React Implementation Notes

• Functional Hooks: Pure functional approach with useCallback/useMemo
• Proper Effects: useEffect for side effects, useLayoutEffect when needed
• Typed Returns: Comprehensive TypeScript return type definitions

Vue Implementation Notes

• Composition API: Pure composition functions
• Reactive References: Using ref/computed/watch as appropriate
• Lifecycle Management: Proper cleanup via onUnmounted

🧪 Testing

Each hook includes comprehensive tests covering:

• Normal usage scenarios
• Edge cases and error conditions
• Cleanup and resource management
• Cross-framework behavioral consistency

📄 License

MIT License - Free to use in commercial and personal projects.

🤝 Contributing

Contributions are welcome! Please see our Contributing Guide for details.

🆘 Support

For support, please open an issue in the repository or contact the maintainers.