Framework Integration

Direct integration with NPM library is under development. Currently CDN integration is the only option

React Integration

Basic Setup

Example CDN integration into ReactJS project


// components/WheelbaseStore.tsx
import { useEffect, useRef } from 'react';
 
interface WheelbaseStoreProps {
  dealerId: number;
  locale?: string;
  hideFilters?: boolean;
  hideHero?: boolean;
  backgroundColor?: string;
}
 
export function WheelbaseStore({ 
  dealerId, 
  locale = 'en-us', 
  hideFilters = false,
  hideHero = false,
  backgroundColor 
}: WheelbaseStoreProps) {
  const scriptLoadedRef = useRef(false);
 
  useEffect(() => {
    if (scriptLoadedRef.current) return;
    
    if (customElements.get('wheelbase-store')) {
      scriptLoadedRef.current = true;
      return;
    }
 
    const script = document.createElement('script');
    script.src = 'https://d2toxav8qvoos4.cloudfront.net/latest/wheelbase-widget.umd.cjs';
    script.onload = () => {
      scriptLoadedRef.current = true;
    };
    script.async = true;
    document.head.appendChild(script);
 
    return () => {
      const existingScript = document.querySelector(`script[src="${script.src}"]`);
      if (existingScript) {
        existingScript.remove();
      }
    };
  }, []);
 
  return (
    <wheelbase-store 
      dealer-id={dealerId.toString()}
      locale={locale}
      hide-filters={hideFilters}
      hide-hero={hideHero}
      background-color={backgroundColor}
    />
  );
}

TypeScript Declarations

Add type declarations for the web components:


// types/wheelbase.d.ts
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'wheelbase-store': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
        'dealer-id'?: string;
        'locale'?: string;
        'hide-filters'?: boolean;
        'hide-hero'?: boolean;
        'background-color'?: string;
      }, HTMLElement>;
      'wheelbase-rentals-list': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
        'filters'?: string;
        'locale'?: string;
        'per-page'?: string;
        'on-rental-click'?: string;
      }, HTMLElement>;
      'rental-info': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
        'rental-id'?: string;
        'locale'?: string;
        'on-proceed-to-checkout'?: string;
      }, HTMLElement>;
    }
  }
}
 
export {};

Next.js Integration

For Next.js applications, handle SSR properly:


// components/WheelbaseStoreSSR.tsx
import dynamic from 'next/dynamic';
 
const WheelbaseStore = dynamic(
  () => import('./WheelbaseStore').then(mod => mod.WheelbaseStore),
  { 
    ssr: false,
    loading: () => <div>Loading rental store...</div>
  }
);
 
export default function RentalPage() {
  return (
    <div>
      <h1>Our RV Rentals</h1>
      <WheelbaseStore dealerId={24019} locale="en-us" />
    </div>
  );
}

React Hook for Dynamic Loading

Create a custom hook for better reusability:


// hooks/useWheelbaseComponents.ts
import { useEffect, useState } from 'react';
 
export function useWheelbaseComponents() {
  const [loaded, setLoaded] = useState(false);
 
  useEffect(() => {
    if (customElements.get('wheelbase-store')) {
      setLoaded(true);
      return;
    }
 
    const script = document.createElement('script');
    script.src = 'https://d2toxav8qvoos4.cloudfront.net/latest/wheelbase-widget.umd.cjs';
    script.onload = () => setLoaded(true);
    script.async = true;
    document.head.appendChild(script);
 
    return () => {
      const existingScript = document.querySelector(`script[src="${script.src}"]`);
      if (existingScript) {
        existingScript.remove();
      }
    };
  }, []);
 
  return loaded;
}
 
// Usage
function RentalComponent() {
  const componentsLoaded = useWheelbaseComponents();
 
  if (!componentsLoaded) {
    return <div>Loading...</div>;
  }
 
  return <wheelbase-store dealer-id="24019" />;
}

Performance Optimization

Lazy Loading

Load components only when needed:


// React example with Intersection Observer
import { useEffect, useRef, useState } from 'react';
 
function LazyWheelbaseStore() {
  const [inView, setInView] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );
 
    if (ref.current) {
      observer.observe(ref.current);
    }
 
    return () => observer.disconnect();
  }, []);
 
  return (
    <div ref={ref}>
      {inView ? (
        <wheelbase-store dealer-id="24019" />
      ) : (
        <div style={{ height: '600px' }}>Loading...</div>
      )}
    </div>
  );
}

Preloading

Preload the script for better performance:


<!-- Add to <head> -->
<link 
  rel="preload" 
  href="https://d2toxav8qvoos4.cloudfront.net/latest/wheelbase-widget.umd.cjs" 
  as="script"
>

Troubleshooting

Common Issues

TypeScript errors: Ensure you have the proper type declarations Components not rendering in SSR: Use client-only rendering patterns Script loading race conditions: Check if components are already defined before loading Event handling: Use proper event listeners for custom events

Debug Mode

Enable debug mode in development:


<wheelbase-store dealer-id="24019" debug="true"></wheelbase-store>