react-mail-inbox 1.0.2 → 1.0.4

package/README.md

@@ -1,4 +1,4 @@
-# Gmail Inbox Component
+# React Mail Inbox Component
 
 A fully customizable, Gmail-style inbox component built with React, featuring a rich text editor powered by Lexical.
 
@@ -15,11 +15,11 @@ A fully customizable, Gmail-style inbox component built with React, featuring a
 ## Installation
 
 ```bash
-npm install @your-org/gmail-inbox
+npm install react-mail-inbox
 # or
-yarn add @your-org/gmail-inbox
+yarn add react-mail-inbox
 # or
-pnpm add @your-org/gmail-inbox
+pnpm add react-mail-inbox
 ```
 
 ### Peer Dependencies
@@ -38,8 +38,8 @@ This package requires the following peer dependencies:
 ### Basic Example
 
 ```tsx
-import GmailInbox, { type EmailData, type EmailOption } from '@your-org/gmail-inbox';
-import '@your-org/gmail-inbox/styles.css';
+import GmailInbox, { type EmailData, type EmailOption } from "react-mail-inbox";
+import "react-mail-inbox/styles.css";
 
 function App() {
   // Fetch email suggestions from your API
@@ -50,12 +50,12 @@ function App() {
 
   // Handle email submission
   const handleSendEmail = (emailData: EmailData) => {
-    console.log('Sending email:', emailData);
+    console.log("Sending email:", emailData);
     // Send to your backend API
-    fetch('/api/emails/send', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(emailData)
+    fetch("/api/emails/send", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(emailData),
     });
   };
 
@@ -72,21 +72,21 @@ function App() {
 ### With Theme Control
 
 ```tsx
-import GmailInbox, { useTheme, type Theme } from '@your-org/gmail-inbox';
+import GmailInbox, { useTheme, type Theme } from "react-mail-inbox";
 
 function ThemeToggle() {
   const { theme, toggleTheme } = useTheme();
 
   return (
     <button onClick={toggleTheme}>
-      {theme === 'dark' ? '☀️ Light' : '🌙 Dark'}
+      {theme === "dark" ? "☀️ Light" : "🌙 Dark"}
     </button>
   );
 }
 
 function App() {
   const handleThemeChange = (theme: Theme) => {
-    console.log('Theme changed to:', theme);
+    console.log("Theme changed to:", theme);
     // Save to localStorage, etc.
   };
 
@@ -105,13 +105,13 @@ function App() {
 ### With Initial Data
 
 ```tsx
-import GmailInbox, { type EmailData } from '@your-org/gmail-inbox';
+import GmailInbox, { type EmailData } from "react-mail-inbox";
 
 function ReplyToEmail() {
   const initialData: Partial<EmailData> = {
-    to: [{ email: 'recipient@example.com', name: 'John Doe' }],
-    subject: 'Re: Previous conversation',
-    body: '<p>Thanks for your message!</p>',
+    to: [{ email: "recipient@example.com", name: "John Doe" }],
+    subject: "Re: Previous conversation",
+    body: "<p>Thanks for your message!</p>",
   };
 
   return (
@@ -128,15 +128,15 @@ function ReplyToEmail() {
 
 ### GmailInbox Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `fetchEmailOptions` | `(query: string) => Promise<EmailOption[]>` | ✅ | Async function to fetch email suggestions |
-| `handleChange` | `(emailData: EmailData) => void` | ✅ | Callback fired when user sends email |
-| `initialData` | `Partial<EmailData>` | ❌ | Pre-populate email fields |
-| `initialTheme` | `'light' \| 'dark'` | ❌ | Initial theme (default: `'dark'`) |
-| `onThemeChange` | `(theme: Theme) => void` | ❌ | Callback when theme changes |
-| `leftChildren` | `ReactNode` | ❌ | Custom content for left side of header |
-| `rightChildren` | `ReactNode` | ❌ | Custom content for right side of header |
+| Prop                | Type                                        | Required | Description                               |
+| ------------------- | ------------------------------------------- | -------- | ----------------------------------------- |
+| `fetchEmailOptions` | `(query: string) => Promise<EmailOption[]>` | ✅       | Async function to fetch email suggestions |
+| `handleChange`      | `(emailData: EmailData) => void`            | ✅       | Callback fired when user sends email      |
+| `initialData`       | `Partial<EmailData>`                        | ❌       | Pre-populate email fields                 |
+| `initialTheme`      | `'light' \| 'dark'`                         | ❌       | Initial theme (default: `'dark'`)         |
+| `onThemeChange`     | `(theme: Theme) => void`                    | ❌       | Callback when theme changes               |
+| `leftChildren`      | `ReactNode`                                 | ❌       | Custom content for left side of header    |
+| `rightChildren`     | `ReactNode`                                 | ❌       | Custom content for right side of header   |
 
 ### Types
 
@@ -148,7 +148,7 @@ interface EmailData {
   cc: EmailOption[];
   bcc: EmailOption[];
   subject: string;
-  body: string;  // HTML string
+  body: string; // HTML string
   attachments: File[];
 }
 ```
@@ -165,7 +165,7 @@ interface EmailOption {
 #### Theme
 
 ```typescript
-type Theme = 'light' | 'dark';
+type Theme = "light" | "dark";
 ```
 
 ### useTheme Hook
@@ -181,7 +181,7 @@ const { theme, toggleTheme, setTheme } = useTheme();
 The component comes with default styles that you must import:
 
 ```tsx
-import '@your-org/gmail-inbox/styles.css';
+import "react-mail-inbox/styles.css";
 ```
 
 ### CSS Custom Properties