Capsitech.ReactUtilities

A set of javascript utility methods

Installation

npm install @capsitech/react-utilities
# or
yarn add @capsitech/react-utilities

useShortcuts

The useShortcuts hook listens for ordered keyboard combinations in the browser and invokes a callback once per completed key sequence.

import { useShortcuts } from '@capsitech/react-utilities';

useShortcuts(['Shift', 'E'], () => {
  console.log('Shortcut triggered');
});

useShortcuts(['Control', 'Shift', 'B'], () => {
  console.log('Override when possible');
}, { overrideSystem: true });

Supported patterns:

• Pass an ordered array of KeyboardEvent.key values such as ['P'], ['Shift', 'E'], ['Control', 'K'], or ['Meta', 'Enter'].
• Common aliases like Ctrl, Cmd, Esc, Del, Return, Option, and Space are normalized internally.
• Shortcuts are ignored while focus is inside input, textarea, select, or contenteditable elements.
• Repeated keydown events are ignored so the callback fires once per completed press sequence.

Browser shortcut limitation:

• overrideSystem: true calls preventDefault() and registers capture-phase listeners, but browsers and operating systems still reserve some shortcuts.
• Reserved combinations such as address bar focus, tab management, reload, devtools, or OS-level commands may not be overrideable from a web page in every browser.
• For production apps, prefer app-specific combinations that are less likely to conflict with browser or OS shortcuts.

ApiUtility Configuration

The ApiUtility now supports flexible configuration for different deployment environments.

Quick Start

import { ApiUtility } from '@capsitech/react-utilities';

// Configure once at app startup
ApiUtility.configure({
  baseURL: 'https://api.yourapp.com',
});

// Use throughout your app
const users = await ApiUtility.getResult('/users');

Configuration Options

import { ApiUtility, IApiUtilityConfig } from '@capsitech/react-utilities';

const config: IApiUtilityConfig = {
  baseURL: 'https://api.example.com', // Base URL for all API calls
  accessToken: 'your-jwt-token', // JWT token for authorization
  handleError: (error, errors) => {
    // Custom error handler
    console.error('API Error:', error);
  },
};

ApiUtility.configure(config);

Environment Integration

Next.js

// In your _app.tsx or layout.tsx
ApiUtility.configure({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
});

Vite

// In your main.tsx
ApiUtility.configure({
  baseURL: import.meta.env.VITE_API_URL,
});

Create React App

// In your index.tsx
ApiUtility.configure({
  baseURL: process.env.REACT_APP_API_URL,
});

For more detailed configuration examples, see API_CONFIGURATION.md.