@hd-app-modules/message/README.md

A React Native hook for managing loading states and message notifications with toast and modal support

# @hd-app-modules/message

A React Native hook for managing loading states and message notifications with toast and modal support using Zustand for state management.

## Installation

```bash
npm install @hd-app-modules/message
```

## Peer Dependencies

Make sure you have the following peer dependencies installed:

```bash
npm install @expo/vector-icons react react-native styled-components zustand
```

## Usage

### Basic Setup

Wrap your app with the `MessageProvider`:

```tsx
import React from 'react';
import { MessageProvider } from '@hd-app-modules/message';

const App = () => {
  return (
    <MessageProvider 
      themeColor="dark" 
      translations={{ processing: "Loading..." }}
    >
      {/* Your app content */}
    </MessageProvider>
  );
};
```

### Using Loading Hook

```tsx
import React from 'react';
import { useLoading } from '@hd-app-modules/message';

const MyComponent = () => {
  const showLoading = useLoading();
  
  const handleSubmit = async () => {
    showLoading(true, "Saving data...");
    try {
      await saveData();
      showLoading(false);
    } catch (error) {
      showLoading(false);
    }
  };

  return (
    <Button onPress={handleSubmit} title="Save" />
  );
};
```

### Using Message Hook

```tsx
import React from 'react';
import { useMessage } from '@hd-app-modules/message';

const MyComponent = () => {
  const showMessage = useMessage();
  
  const handleSuccess = () => {
    showMessage("Data saved successfully!", "success");
  };
  
  const handleError = () => {
    showMessage("Failed to save data", "error");
  };
  
  const handleToast = () => {
    showMessage("Toast message", "success", { top: 50 });
  };

  return (
    <View>
      <Button onPress={handleSuccess} title="Show Success" />
      <Button onPress={handleError} title="Show Error" />
      <Button onPress={handleToast} title="Show Toast" />
    </View>
  );
};
```

## API Reference

### `MessageProvider`

The main provider component that manages and displays messages.

#### Props

- `themeColor` ('light' | 'dark', optional): Theme for the messages. Default: 'dark'
- `translations` (object, optional): Custom translations for messages
  - `processing` (string): Text shown during loading. Default: 'Processing...'
- `children` (ReactNode, optional): Child components

### `useLoading()`

Hook for managing loading states.

#### Returns

Function with signature: `(visible: boolean, title?: string) => void`

- `visible` (boolean): Whether to show or hide the loading indicator
- `title` (string, optional): Custom loading message

### `useMessage()`

Hook for showing success/error messages.

#### Returns

Function with signature: `(title: string, type: 'error' | 'success', popup?: any) => void`

- `title` (string): Message text to display
- `type` ('error' | 'success'): Type of message
- `popup` (object | boolean, optional): Popup configuration for toast-style messages
  - If `true`: Shows as toast with default positioning
  - If object: Custom positioning and styling (e.g., `{ top: 50, theme: 'light' }`)

## Message Types

### Loading Messages
- Full-screen overlay with spinner
- Auto-dismisses when `showLoading(false)` is called
- Customizable loading text

### Success/Error Messages
- Modal-style messages with icons
- Auto-dismiss after 2 seconds
- Support for both modal and toast styles

### Toast Messages
- Lightweight notifications
- Positioned at top of screen by default
- Customizable positioning via popup configuration

## Theming

The package supports light and dark themes:

- **Dark theme** (default): White text on dark background
- **Light theme**: Dark text on light background with colored icons
  - Success: Green (#00BF58)
  - Error: Red (#FF4A59)

## Examples

### Advanced Toast Configuration

```tsx
const showMessage = useMessage();

// Custom positioned toast
showMessage("Custom toast", "success", {
  top: 100,
  theme: 'light'
});

// Default toast
showMessage("Simple toast", "error", true);
```

### Loading with Custom Text

```tsx
const showLoading = useLoading();

// Default loading
showLoading(true);

// Custom loading text
showLoading(true, "Uploading files...");

// Hide loading
showLoading(false);
```

## License

ISC