@myracereel/page-builder

A React-based visual page builder using Craft.js for creating customizable landing pages.

Installation

npm install @myracereel/page-builder

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom @tanstack/react-query

Usage

Basic Usage

import { PageBuilder, PreviewModal } from '@myracereel/page-builder';
import '@myracereel/page-builder/styles.css';

function App() {
  const [editorState, setEditorState] = useState<string>();
  const [isPreviewOpen, setIsPreviewOpen] = useState(false);

  const handleSave = (json: string) => {
    console.log('Saved:', json);
  };

  const eventData = {
    athlete: {
      name: 'John Doe',
      bibId: '123',
      firstName: 'John',
      lastName: 'Doe',
    },
    event: {
      name: 'Marathon 2024',
      slug: 'marathon-2024',
    },
    organization: {
      name: 'Race Events Inc',
      website: 'https://example.com',
    },
    videos: [
      { locationId: 'loc-1', name: 'Start Line' },
      { locationId: 'loc-2', name: 'Finish Line' },
    ],
  };

  return (
    <>
      <PageBuilder
        onSave={handleSave}
        onStateChange={setEditorState}
        eventData={eventData}
        fetchVideoByLocation={async (locationId, bibId) => {
          // Your API call to fetch video data
          const response = await fetch(`/api/videos/${locationId}?bib=${bibId}`);
          return response.json();
        }}
      />
      <PreviewModal
        isOpen={isPreviewOpen}
        onClose={() => setIsPreviewOpen(false)}
        editorState={editorState}
        eventData={eventData}
      />
    </>
  );
}

Tailwind Configuration

Add the package to your Tailwind content paths:

// tailwind.config.ts
export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@myracereel/page-builder/dist/**/*.js',
  ],
  // ... rest of your config
};

Props

PageBuilder

| Prop | Type | Description | |------|------|-------------| | initialData | string | Initial serialized editor state | | onSave | (json: string) => void | Called when save button is clicked | | onStateChange | (json: string) => void | Called on every editor state change | | eventData | EventData | Data for template variable replacement | | fetchVideoByLocation | (locationId: string, bibId?: string) => Promise<VideoDetail> | API function for fetching videos |

PreviewModal

| Prop | Type | Description | |------|------|-------------| | isOpen | boolean | Controls modal visibility | | onClose | () => void | Called when modal should close | | editorState | string | Serialized editor state to preview | | eventData | EventData | Data for template variable replacement |

Template Variables

The page builder supports dynamic template variables using double curly braces:

• {{ athlete.name }} - Athlete full name
• {{ athlete.bibId }} - Bib number
• {{ athlete.firstName }} - First name
• {{ athlete.lastName }} - Last name
• {{ event.name }} - Event name
• {{ event.slug }} - Event URL slug
• {{ organization.name }} - Organization name
• {{ organization.website }} - Organization website

Components Available

• Container - Flexible container with layout options
• Columns - Multi-column layout (2, 3, or 4 columns)
• Heading - H1-H4 with responsive sizes
• Text - Rich text with formatting
• Button - Customizable buttons
• Link - Hyperlinks
• Image - Images with styling options
• Video - Video player with download functionality
• Divider - Horizontal dividers
• Spacer - Vertical spacing

License

MIT