jsg_addons-selector v0.1.4

jsg_addons-selector

A React component for selecting ticket add-ons and variations.

Installation

npm install jsg_addons-selector

Usage

import { AddonsSelector } from 'jsg_addons-selector';
import 'jsg_addons-selector/dist/index.css';

function App() {
  const handleComplete = (data) => {
    console.log('Selected options:', data);
  };

  const handleBack = () => {
    console.log('Back button clicked');
  };

  return (
    <AddonsSelector
      onComplete={handleComplete}
      onBack={handleBack}
      initialData={yourData}
      headings={{
        title: "Select Your Package", // Optional: Override default title
        subtitle: "Choose the package that fits your needs" // Optional: Override default subtitle
      }}
    />
  );
}

Props

• initialData: The data structure containing variations and add-ons
• onComplete: Callback function when selections are complete
• onBack: Optional callback function for the back button
• theme: Optional theme configuration object
• headings: Optional configuration for title and subtitle
  • title: Override the default title (default: "Choose Your Options")
  • subtitle: Override the default subtitle (uses description from initialData if not provided)

Data Structure

The component expects data in the following format:

interface AddonData {
  pageData: {
    parent_product: string;
    variations: Variation[];
  };
}

See the TypeScript definitions for complete type information.

Styling

This package uses Tailwind CSS. Make sure to import the styles in your application:

import 'jsg_addons-selector/dist/index.css';

License

MIT