@zytehub/email-react

Beautiful React UI components for email management

Pre-built, production-ready React components for managing email domains, DNS configuration, and webhooks.

Features

✅ Domain Cards - Beautiful domain cards with DNS records
✅ Add Domain Modal - User-friendly domain creation flow
✅ DNS Records Table - Copy-to-clipboard DNS configuration
✅ Verification UI - Real-time verification status
✅ Webhook Configuration - Easy webhook setup
✅ TypeScript Support - Full type definitions
✅ Responsive Design - Works on all screen sizes

Installation

npm install @zytehub/email-react @zytehub/email-client

Note: This package requires React 16.8+ (hooks support)

Quick Start

Option 1: Full Management UI

import { DomainManagement } from '@zytehub/email-react';

function EmailSettings() {
  return (
    <DomainManagement 
      apiUrl="https://your-api.com"
      apiKey="your-api-key"
      platformId="your-platform-id"
    />
  );
}

That's it! This gives you a complete email domain management interface.

Option 2: Individual Components

import { DomainCard, AddDomainModal } from '@zytehub/email-react';
import { useState } from 'react';

function CustomEmailUI() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [domains, setDomains] = useState([]);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>
        Add Domain
      </button>

      {domains.map(domain => (
        <DomainCard 
          key={domain.id}
          domain={domain}
          onVerify={() => handleVerify(domain.id)}
          onDelete={() => handleDelete(domain.id)}
        />
      ))}

      <AddDomainModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        onSubmit={handleDomainCreate}
      />
    </div>
  );
}

Components

<DomainManagement />

Complete email domain management interface with all features.

Props:

• apiUrl (string, required) - Your Platform Services API URL
• apiKey (string, required) - Your API key
• platformId (string, required) - Your platform ID

Example:

<DomainManagement 
  apiUrl="https://api.example.com"
  apiKey="sk_live_abc123"
  platformId="platform_xyz"
/>

<DomainCard />

Displays a single domain with DNS records, verification status, and actions.

Props:

• domain (object, required) - Domain object with DNS records
• onVerify (function, optional) - Called when verify button clicked
• onDelete (function, optional) - Called when delete button clicked
• isVerifying (boolean, optional) - Shows loading state

Example:

<DomainCard 
  domain={{
    domain: 'mail.example.com',
    status: 'pending',
    dns_records: [
      { type: 'CNAME', host: 'em123', value: 'sendgrid.net' },
      { type: 'TXT', host: '_dmarc', value: 'v=DMARC1; p=none' }
    ]
  }}
  onVerify={handleVerify}
  onDelete={handleDelete}
  isVerifying={false}
/>

<AddDomainModal />

Modal dialog for adding new email domains.

Props:

• isOpen (boolean, required) - Controls modal visibility
• onClose (function, required) - Called when modal should close
• onSubmit (function, required) - Called with domain config on submit

Example:

<AddDomainModal
  isOpen={showModal}
  onClose={() => setShowModal(false)}
  onSubmit={async (config) => {
    await createDomain(config);
    setShowModal(false);
  }}
/>

Styling

The components come with default styles. You can:

Option 1: Use Default Styles (Tailwind-based)

The components use Tailwind CSS classes. Make sure Tailwind is installed in your project:

npm install tailwindcss

Option 2: Custom Styles

Override styles by targeting component classes:

.domain-card {
  border: 2px solid #your-color;
}

.dns-record-row {
  background: #your-bg;
}

TypeScript

Full TypeScript support included:

import { DomainManagement, DomainCardProps } from '@zytehub/email-react';

const props: DomainCardProps = {
  domain: {
    domain: 'mail.example.com',
    status: 'verified',
    dns_records: []
  },
  onVerify: () => console.log('Verify clicked'),
  isVerifying: false
};

Use Cases

Admin Dashboard

import { DomainManagement } from '@zytehub/email-react';

function AdminEmailPage() {
  return (
    <div className="admin-panel">
      <h1>Email Configuration</h1>
      <DomainManagement {...config} />
    </div>
  );
}

User Settings

import { DomainCard } from '@zytehub/email-react';

function UserEmailSettings({ userDomains }) {
  return (
    <div>
      <h2>Your Email Domains</h2>
      {userDomains.map(domain => (
        <DomainCard key={domain.id} domain={domain} />
      ))}
    </div>
  );
}

Requirements

• React >= 16.8.0
• React DOM >= 16.8.0
• @zytehub/email-client >= 1.0.2

Related Packages

• @zytehub/email-client - Core API client
• @zytehub/auth-react - Authentication components (coming soon)

License

MIT © ZyteHub

Support

• Email: [email protected]
• Issues: Report via your Platform Services dashboard
• Documentation: https://docs.yourplatform.com

Made with ❤️ by ZyteHub