React SafeKit UI

A modern, fully customizable React component library designed for building accessible and performant user interfaces. Features built-in loading states, idempotency handling, debounced inputs, and flexible glassmorphism styling.

✨ Features

• AsyncButton: Button component with loading states and automatic idempotency key generation
• DebounceInput: Input component with built-in debouncing for optimized performance
• Glassmorphism Styling: Modern, translucent design with customizable backgrounds
• TypeScript Support: Fully typed with TypeScript for better developer experience
• Accessible: Built with accessibility best practices
• Lightweight: Minimal dependencies, optimized bundle size
• Customizable: Extensive prop-based customization options

🚀 Installation

npm install react-safekit-ui

Peer Dependencies

This library requires the following peer dependencies:

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0"
}

📖 Usage

AsyncButton

The AsyncButton component provides a button with built-in loading states and idempotency handling, perfect for async operations like API calls.

import React from 'react';
import { AsyncButton } from 'react-safekit-ui';

function App() {
  const handleAsyncClick = async ({ idempotencyKey }: { idempotencyKey?: string }) => {
    console.log('Processing with key:', idempotencyKey);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    return { success: true };
  };

  return (
    <AsyncButton
      onClick={handleAsyncClick}
      canClick={true}
      size="md"
      bgColor="rgba(59, 130, 246, 0.8)"
      generateKey={true}
      simulateDelay={2000}
      loadingTitle="Processing..."
    >
      Submit Form
    </AsyncButton>
  );
}

export default App;

DebounceInput

The DebounceInput component automatically debounces user input to reduce the frequency of expensive operations like API searches.

import React, { useState } from 'react';
import { DebounceInput } from 'react-safekit-ui';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = (value: string) => {
    console.log('Searching for:', value);
    // Perform search API call here
    setSearchTerm(value);
  };

  return (
    <DebounceInput
      value={searchTerm}
      onChangefn={handleSearch}
      type="search"
      placeholder="Search products..."
      debounceDelay={300}
      size="md"
      bgColor="rgba(255, 255, 255, 0.1)"
      width="100%"
    />
  );
}

export default SearchComponent;

🧩 Components API

AsyncButton

A button component that handles async operations with loading states and idempotency.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onClick | (params: { idempotencyKey?: string }) => Promise<any> | - | Async click handler function | | canClick | boolean | true | Whether the button can be clicked | | size | "sm" \| "md" \| "lg" | "md" | Button size | | width | "fw" \| string | - | Button width ("fw" for full width) | | bgColor | string | "rgba(59, 130, 246, 0.8)" | Background color (supports rgba) | | lockWhilePending | boolean | true | Lock button during async operations | | generateKey | boolean | false | Auto-generate idempotency keys | | loadingTitle | string | "Loading..." | Text shown during loading | | simulateDelay | number | 0 | Simulated delay in milliseconds for testing | | children | ReactNode | - | Button content |

DebounceInput

An input component with built-in debouncing for optimized performance.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | - | Controlled input value | | onChangefn | (value: string) => void | - | Callback function called with debounced value | | onFocusfn | () => void | - | Optional focus event handler | | onClickfn | () => void | - | Optional click event handler | | type | "text" \| "number" \| "search" \| "phone" \| "tel" | "text" | Input type | | placeholder | string | - | Placeholder text | | debounceDelay | number | 300 | Debounce delay in milliseconds | | bgColor | string | "rgba(255, 255, 255, 0.1)" | Background color with glassmorphism | | size | "sm" \| "md" \| "lg" | "md" | Input size | | width | "fw" \| string | - | Input width ("fw" for full width) | | disabled | boolean | false | Disable the input |

🎨 Styling

Both components feature glassmorphism styling with customizable backgrounds. The styling is designed to be modern and translucent, working well with various design systems.

🔧 Development

Building

npm run build

Development Mode

npm run dev

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

If you have any questions or issues, please open an issue on GitHub.