@hy_ong/react-hooks

A collection of reusable React hooks for dialog management in modern React applications.

Installation

npm install @hy_ong/react-hooks

Hooks

useDialog

A generic hook for managing modal dialogs with custom props and response handling.

import { useDialog } from '@hy_ong/react-hooks';

// Basic usage
const dialog = useDialog<{ title: string }, string>();

// Open a dialog
dialog.open(
  { title: "Enter your name" },
  (response) => console.log("Response:", response),
  () => console.log("Cancelled")
);

// Close with response
dialog.close("John Doe");

// Cancel without response
dialog.cancel();

API:

• show: boolean - Whether the dialog is visible
• props: DialogProps - Current dialog props
• response: DialogResponse | undefined - Last response from dialog
• open(props, onClose?, onCancel?) - Open the dialog
• close(response?) - Close dialog with optional response
• cancel() - Cancel dialog without response

useAlert

A specialized hook for simple alert dialogs with title and description.

import { useAlert } from '@hy_ong/react-hooks';

const alert = useAlert();

// Open an alert
alert.open({
  title: "Success",
  description: "Operation completed successfully",
  onClose: () => console.log("Alert closed")
});

// Close the alert
alert.close();

API:

• show: boolean - Whether the alert is visible
• props: AlertProps - Current alert props
• open(props) - Open the alert
• close() - Close the alert

AlertProps:

• title: string - Alert title
• description: string - Alert description
• onClose?: () => void - Optional close callback

useConfirm

A specialized hook for confirmation dialogs with grant/deny actions.

import { useConfirm } from '@hy_ong/react-hooks';

const confirm = useConfirm();

// Open a confirmation dialog
confirm.open({
  title: "Delete Item",
  description: "Are you sure you want to delete this item?",
  grantText: "Delete",
  denyText: "Cancel",
  onGrant: () => console.log("Confirmed"),
  onDeny: () => console.log("Denied")
});

// Grant the confirmation
confirm.grant();

// Deny the confirmation
confirm.deny();

API:

• show: boolean - Whether the confirmation is visible
• props: AlertProps - Current confirmation props
• open(props) - Open the confirmation
• grant() - Grant/confirm the action
• deny() - Deny/cancel the action

AlertProps:

• title: string - Confirmation title
• description: string - Confirmation description
• grantText?: string - Text for grant/confirm button
• denyText?: string - Text for deny/cancel button
• onGrant?: () => void - Optional grant callback
• onDeny?: () => void - Optional deny callback

Example Implementation

Here's how you might implement a dialog component using these hooks:

import React from 'react';
import { useAlert, useConfirm, useDialog } from '@hy_ong/react-hooks';

function MyComponent() {
  const alert = useAlert();
  const confirm = useConfirm();
  const dialog = useDialog<{ message: string }, boolean>();

  return (
    <div>
      <button onClick={() => alert.open({
        title: "Info",
        description: "This is an information message"
      })}>
        Show Alert
      </button>

      <button onClick={() => confirm.open({
        title: "Confirm Action",
        description: "Do you want to proceed?",
        onGrant: () => console.log("User confirmed"),
        onDeny: () => console.log("User denied")
      })}>
        Show Confirmation
      </button>

      <button onClick={() => dialog.open(
        { message: "Custom dialog content" },
        (response) => console.log("Dialog response:", response)
      )}>
        Show Custom Dialog
      </button>

      {/* Render your dialog components based on the hook states */}
      {alert.show && (
        <AlertDialog
          title={alert.props.title}
          description={alert.props.description}
          onClose={alert.close}
        />
      )}

      {confirm.show && (
        <ConfirmDialog
          title={confirm.props.title}
          description={confirm.props.description}
          grantText={confirm.props.grantText}
          denyText={confirm.props.denyText}
          onGrant={confirm.grant}
          onDeny={confirm.deny}
        />
      )}

      {dialog.show && (
        <CustomDialog
          message={dialog.props.message}
          onClose={dialog.close}
          onCancel={dialog.cancel}
        />
      )}
    </div>
  );
}

Features

• TypeScript Support: Full TypeScript support with generic types
• Lightweight: Minimal dependencies (only React)
• Flexible: Generic useDialog for custom implementations
• Specialized: Pre-built hooks for common use cases
• Modern: Built with React hooks and functional components

Development

# Install dependencies
npm install

# Run tests
npm test

# Build
npm run build

License

MIT © Ong Hoe Yuan

Repository

GitHub Repository

Issues

Found a bug or have a feature request? Create an issue