React-omnisend NPM

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>;
};