Toutix Whitelabel EventListPageContainer

A React container component package that wraps the original Toutix event list page (/events) for whitelabel implementations. This component directly imports the original event list page and provides it as a reusable container component.

Features

• ✅ Original Page Import - Directly imports the complete original /events page
• ✅ Container Wrapper - Provides a clean container interface
• ✅ CSS Styling - Includes whitelabel-specific styles
• ✅ SSR Compatible - Works with Next.js server-side rendering
• ✅ Hydration Safe - No hydration mismatch errors
• ✅ TypeScript Support - Full type definitions
• ✅ Lightweight - Minimal wrapper overhead

Installation

npm install toutix-whitelabel

Quick Start

import React from 'react';
import { EventListPageContainer } from 'toutix-whitelabel';
import EventListPage from '../../../src/app/events/page';

// Import the CSS styles
import 'toutix-whitelabel/dist/index.css';

function App() {
  return (
    <div>
      <EventListPageContainer className="my-custom-class">
        <EventListPage />
      </EventListPageContainer>
    </div>
  );
}

Component Props

EventListPageContainer

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | '' | Additional CSS classes for the container | | children | React.ReactNode | - | The event list page component to wrap |

How It Works

The EventListPageContainer component:

1. Accepts Children - Takes the original event list page component as children
2. Wraps with Container - Provides a container div with whitelabel styling
3. Exposes Clean Interface - Simple props-based API
4. Maintains Functionality - All original page functionality preserved

Source Code

import React from 'react';

// Import styles
import './styles/toutix-whitelabel.css';

interface EventListPageContainerProps {
  className?: string;
  children?: React.ReactNode;
}

export const EventListPageContainer: React.FC<EventListPageContainerProps> = ({ 
  className = '',
  children 
}) => {
  return (
    <div className={`toutix-whitelabel ${className}`}>
      {children}
    </div>
  );
};

Dependencies

This component works with your original Toutix project:

• Original Page: Pass your original event list page component as children
• All Dependencies: Automatically includes all original dependencies when you pass the component
• Store: Uses your existing event list store
• Components: Uses your existing event components
• Services: Uses your existing API services

Styling

The component includes its own CSS styles. You can import them in several ways:

Option 1: Import from dist (Recommended)

import 'toutix-whitelabel/dist/index.css';

Option 2: Import from root

import 'toutix-whitelabel/toutix-whitelabel.css';

Option 3: Import in your CSS file

@import 'toutix-whitelabel/dist/index.css';

Custom Styling

The component uses CSS classes with the toutix-whitelabel prefix to avoid conflicts with your existing styles. You can override styles by targeting these classes:

/* Custom styling example */
.toutix-whitelabel .bg-blue-600 {
  background-color: #your-brand-color !important;
}

.toutix-whitelabel .text-blue-600 {
  color: #your-brand-color !important;
}

SSR Compatibility

The package is fully compatible with Next.js server-side rendering (SSR) and App Router. It includes:

• Hydration-safe components - No hydration mismatch errors
• Client-side state management - Uses proper client-side rendering patterns
• Loading states - Shows appropriate loading states during hydration
• URL parameter handling - Safely handles URL parameters on both server and client

Next.js App Router Usage

// app/events/page.tsx
'use client'; // Required for client-side components

import { EventListPageContainer } from 'toutix-whitelabel';
import EventListPage from '../../../src/app/events/page';
import 'toutix-whitelabel/dist/index.css'; // Import styles

export default function EventsPage() {
  return (
    <EventListPageContainer className="my-events-page">
      <EventListPage />
    </EventListPageContainer>
  );
}

Next.js Pages Router Usage

// pages/events.tsx
import { EventListPageContainer } from 'toutix-whitelabel';
import EventListPage from '../src/app/events/page';
import 'toutix-whitelabel/dist/index.css';

export default function EventsPage() {
  return (
    <EventListPageContainer>
      <EventListPage />
    </EventListPageContainer>
  );
}

Integration with Original Project

This component seamlessly integrates with your existing Toutix project:

• Automatic data loading - Uses your existing store and API calls
• URL parameter handling - Reads and applies URL parameters automatically
• Store integration - Uses your existing Preact Signals store
• Component structure - Maintains your existing component hierarchy
• Styling - Inherits your existing design system with whitelabel overrides

Benefits

1. ✅ Always Up-to-Date - Automatically uses the latest version of your event list page
2. ✅ No Duplication - No need to maintain separate components
3. ✅ Full Functionality - All original features preserved
4. ✅ Easy Integration - Simple container component interface
5. ✅ Styling Control - Whitelabel-specific styling support
6. ✅ Type Safe - Full TypeScript support

Development

# Install dependencies
npm install

# Build the package
npm run build

# Create distributable package
npm pack

License

MIT