React Super Models

A premium, high-performance React status popup and model library. Featuring elegant glassmorphism, smooth SVG animations, and celebratory effects for an exceptional user experience.

✨ Features

• 🎪 Status Popups: Interactive, centered models for major lifecycle events (Success/Error).
• 🎨 Animated Marks: Self-drawing SVG checkmarks and cross marks for clear visual feedback.
• 🎊 Confetti Celebrations: Automatic "ribbon shots" on success to delight your users.
• 🛠️ Developer Friendly: Global imperative API or flexible React hooks.
• 📦 Zero Props Needed: Works out of the Box with sensible defaults.
• ⚛️ React 16.8+ to 19: Full support for latest and legacy React versions.

📦 Installation

npm install react-super-models
# or
yarn add react-super-models

🚀 Quick Setup

Wrap your application with the ModelProvider.

import React from 'react';
import { ModelProvider } from 'react-super-models';
import 'react-super-models/dist/index.css';

function Main() {
  return (
    <ModelProvider>
      <App />
    </ModelProvider>
  );
}

📖 Usage

🏆 Status Popups (Perfect for Forms)

Trigger a centered, celebratory modal with a single call.

import { model } from 'react-super-models';

function SimpleForm() {
  const handleSubmit = async () => {
    try {
      // Your submit logic
      model.success('Your data has been submitted successfully!', {
        successTitle: 'Submission Successful',
        duration: 5000
      });
    } catch (err) {
      model.error('Something went wrong. Please try again.', {
        errorTitle: 'Submission Failed'
      });
    }
  };

  return <button onClick={handleSubmit}>Submit Data</button>;
}

🪝 Using Hooks

import { useModel } from 'react-super-models';

function MyComponent() {
  const { success, error, popup, close } = useModel();

  return (
    <button onClick={() => success('Great job!')}>
      Click Me
    </button>
  );
}

🛠️ Options Reference

| Property | Type | Default | Description | |---|---|---|---| | duration | number | 3000 | Auto-dismiss time in ms. Use 0 for manual close. | | confetti | boolean | true | Toggle confetti on success popups. | | successTitle | string | 'Success!' | Title text for success popups. | | errorTitle | string | 'Oops!' | Title text for error popups. | | showButton | boolean | false | Show a "Continue" button in popups. | | buttonText | string | 'Continue' | Text for the popup button. |

📜 License

MIT © kondra ramesh