React Subscription Account Package

A professional React-based NPM package that provides automatic account generation and subscription management with a clean, modern UI.

Features

• ✅ Automatic Account Generation: Automatically creates a payment account when installed
• ✅ Account Button Component: Ready-to-use button component for navigation bars
• ✅ Subscription Management: Multiple subscription periods with pricing calculation
• ✅ 100% Discount Applied: All plans show 100% discount (Rs 0 net payment)
• ✅ Professional UI: Clean, modern interface with smooth animations
• ✅ TypeScript Support: Fully typed with TypeScript definitions
• ✅ Zero Dependencies: Only requires React and React-DOM as peer dependencies

Installation

npm install atozas-subscription-account

or

yarn add atozas-subscription-account

Quick Start

Basic Usage

import React from 'react';
import { AccountButton } from 'atozas-subscription-account';
// Styles are included automatically, but you can import them explicitly if needed:
// import 'atozas-subscription-account/dist/index.css';

function App() {
  return (
    <div>
      <nav>
        <div>Logo</div>
        <AccountButton />
        <div>Menu</div>
      </nav>
    </div>
  );
}

Integration in Navigation Bar

To add the Account button in the middle of your top navigation bar:

import React from 'react';
import { AccountButton } from 'atozas-subscription-account';

function NavigationBar() {
  return (
    <nav style={{ 
      display: 'flex', 
      justifyContent: 'space-between', 
      alignItems: 'center',
      padding: '1rem 2rem',
      backgroundColor: '#fff',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
    }}>
      <div>Logo</div>
      <AccountButton />
      <div>Menu Items</div>
    </nav>
  );
}

Using CSS Grid for Centered Button

import React from 'react';
import { AccountButton } from 'atozas-subscription-account';

function NavigationBar() {
  return (
    <nav style={{ 
      display: 'grid',
      gridTemplateColumns: '1fr auto 1fr',
      alignItems: 'center',
      padding: '1rem 2rem'
    }}>
      <div style={{ justifySelf: 'start' }}>Logo</div>
      <AccountButton />
      <div style={{ justifySelf: 'end' }}>Menu</div>
    </nav>
  );
}

Subscription Plans

The package includes the following subscription periods:

• Monthly (1 month) - Disabled
• 3 Months - Disabled
• 6 Months - Enabled (Default)
• Yearly (12 months) - Disabled
• 3 Years (36 months) - Disabled

Pricing

• Monthly Price: Rs 5
• Discount: 100% (applied to all plans)
• Net Payment: Rs 0 (due to 100% discount)

API Reference

AccountButton

The main component exported by the package.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | className | string | No | Additional CSS class names | | style | React.CSSProperties | No | Inline styles for the button |

Example

<AccountButton 
  className="my-custom-class"
  style={{ marginLeft: '10px' }}
/>

Account Generation

The package automatically generates a unique account ID when first loaded. The account is stored in localStorage and persists across page reloads.

• Storage Key: react_subscription_account
• Account ID Format: acc_{timestamp}_{randomString}

Styling

The package includes built-in styles, but you can customize the appearance using:

1. CSS Classes: Override the default styles
2. Inline Styles: Pass style prop to AccountButton
3. CSS Variables: (Future enhancement)

Custom Styling Example

<AccountButton 
  style={{
    backgroundColor: '#your-color',
    borderRadius: '8px',
    padding: '12px 24px'
  }}
/>

TypeScript Support

The package is fully typed. Import types as needed:

import { AccountButton, SubscriptionPeriod, AccountData, SubscriptionPlan } from 'atozas-subscription-account';

Development

Building the Package

npm run build

Development Mode

npm run dev

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Contributing

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

Support

For issues and feature requests, please use the GitHub issue tracker.