@bagisto-native/react

@bagisto-native/react provides React wrappers for the Web Components included in @bagisto-native/core, making it easy to integrate Bagisto Native functionality into React.js and Next.js applications.

It is designed to work smoothly with Open Source Headless eCommerce and any React.js or Next.js setup, making it easy to connect a headless storefront with native mobile apps.

This module is intended to be used together with @bagisto-native/core.

Note: To create Bagisto Headless Commerce, use the following command:

npx -y @bagisto-headless/create your-storefront

📦 Installation

Install the module via npm:

npm install @bagisto-native/react

Note: Ensure that @bagisto-native/core is also installed and the bundle.js is included in your project.

🌐 Components

@bagisto-native/react provides React wrappers for the following Web Components:

| Component | Description | | -------------------- | ----------------------------------------------------------------- | | DynamicButton | Handles native buttons for cart, share, barcode, and image search | | HotwireToast | Trigger native toast messages | | HotwireSearch | Trigger native search events | | HotwireLocation | Auto-fill checkout address using native location | | HotwireHistorySync | Send current page URL to native apps | | HotwireThemeMode | Send current theme mode (light/dark) |

All components should be used inside client components in Next.js ('use client') since they interact with the browser.

⚡ Usage Examples

Hotwire Toast

'use client';
import dynamic from 'next/dynamic';

const HotwireToast = dynamic(
  () => import('@bagisto-native/react').then(mod => mod.HotwireToast),
  { ssr: false }
);

export default function AppToast() {
  return <HotwireToast />;
}

Trigger a toast from @bagisto-native/core:

import { triggerHotwireNativeToast } from '@bagisto-native/core';

triggerHotwireNativeToast('Hello World!');

Hotwire History Sync

'use client';
import dynamic from 'next/dynamic';

const HotwireHistorySync = dynamic(
  () => import('@bagisto-native/react').then(mod => mod.HotwireHistorySync),
  { ssr: false }
);

export default function AppHistorySync() {
  return <HotwireHistorySync />;
}

Trigger history sync from @bagisto-native/core:

import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { triggerHistorySyncEvent } from '@bagisto-native/core';

export default function HistorySync() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    const url = new URL(`${window.location.origin}${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`);
    triggerHistorySyncEvent(url);
  }, [pathname, searchParams]);

  return null;
}

Hotwire Theme Mode

'use client';
import dynamic from 'next/dynamic';

const HotwireThemeMode = dynamic(
  () => import('@bagisto-native/react').then(mod => mod.HotwireThemeMode),
  { ssr: false }
);

export default function AppThemeMode() {
  return <HotwireThemeMode />;
}

Send theme mode:

import { triggerThemeModeEvent } from '@bagisto-native/core';

triggerThemeModeEvent('light'); // 'light' or 'dark'

Hotwire Search

'use client';
import dynamic from 'next/dynamic';

const HotwireSearch = dynamic(
  () => import('@bagisto-native/react').then(mod => mod.HotwireSearch),
  { ssr: false }
);

export default function AppSearch() {
  return <HotwireSearch />;
}

Listen to search events:

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function TurboSearchRouterBridge() {
  const router = useRouter();

  useEffect(() => {
    const handleTurboSearch = (e: Event) => {
      const customEvent = e as CustomEvent<{ query: string }>;
      const query = customEvent.detail.query;
      router.push(`/search?q=${encodeURIComponent(query)}`);
    };

    window.addEventListener('turbo:next-search', handleTurboSearch);

    return () => window.removeEventListener('turbo:next-search', handleTurboSearch);
  }, [router]);

  return null;
}

Hotwire Location

'use client';
import dynamic from 'next/dynamic';

const HotwireLocation = dynamic(
  () => import('@bagisto-native/react').then(mod => mod.HotwireLocation),
  { ssr: false }
);

export default function AppLocation(props: { fieldNames: { address: string[]; city: string[]; postCode: string[] } }) {
  return (
    <HotwireLocation fieldNames={props.fieldNames} style={{ display: 'none' }}>
      Hotwire Location
    </HotwireLocation>
  );
}

Dynamic Button

'use client';
import dynamic from 'next/dynamic';

const DynamicButton = dynamic(
  () => import('@bagisto-native/react').then(mod => mod.DynamicButton),
  { ssr: false }
);

export default function AppDynamicButton(props: { dataPageType?: string }) {
  return (
    <>
      <DynamicButton pageType={props.dataPageType || 'home'} style={{ display: 'none' }} />
      <DynamicButton cartCountEvent={true} style={{ display: 'none' }} />
    </>
  );
}

Use pageType='home' on homepage, pageType='product' on product pages.

📋 Requirements

• Node.js >= 18
• React >= 18 / Next.js >= 15
• @bagisto-native/core must be installed and bundle.js included

🆘 Support

Open an issue or discussion in the repository if you need help.

📄 License

MIT License