React Omnisend

A lightweight React context wrapper for integrating Omnisend event tracking seamlessly into your React applications.

Installation

Install the package using npm:

npm install react-omnisend

or using yarn:

yarn add react-omnisend

Usage

React SPA Example

Wrap your application with OmnisendProvider and pass your brandID:

import { OmnisendProvider } from 'react-omnisend';
import App from './App';

const Root = () => (
  <OmnisendProvider brandID="YOUR_BRAND_ID">
    <App />
  </OmnisendProvider>
);

export default Root;

Next.js (Pages Router) Example

Wrap your _app.js with OmnisendProvider:

import { OmnisendProvider } from 'react-omnisend';

function MyApp({ Component, pageProps }) {
  return (
    <OmnisendProvider brandID="YOUR_BRAND_ID">
      <Component {...pageProps} />
    </OmnisendProvider>
  );
}

export default MyApp;

Next.js (App Router) Example

In Next.js App Router, wrap your layout.tsx or layout.js:

import { OmnisendProvider } from 'react-omnisend';

export default function RootLayout({ children }) {
  return (
    <OmnisendProvider brandID="YOUR_BRAND_ID">
      {children}
    </OmnisendProvider>
  );
}

Tracking Events

Use the useOmnisend hook to track events:

import { useOmnisend } from 'react-omnisend';

const Component = () => {
  const omnisend = useOmnisend();

  const handleEvent = () => {
    omnisend.trackEvent("event_name", { key: "value" });
  };

  return <button onClick={handleEvent}>Track Event</button>;
};

Supported Events

Currently, the package supports the following Omnisend events:

• Added Product to Cart (API Reference)
• Started Checkout (API Reference)
• Viewed Product (API Reference)

Ensure that you send event data following Omnisend's API documentation.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to improve this package.

License

This project is licensed under the MIT License.