For applications built with React, we provide a dedicated library to simplify the integration of our SDK. This library ensures that Edgee’s services are seamlessly integrated and that page views are tracked accurately during single-page navigations.

​
Installation

You can install the react-edgee library using npm or yarn.

npm install react-edgee

​
Usage

Import the EdgeeSdk component from the react-edgee library:

import EdgeeSdk from 'react-edgee';

​
When using app folder structure

Add the EdgeeSdk component inside the <head> tag of your RootLayout component:

import EdgeeSdk from "react-edgee";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Your page title</title>
        <EdgeeSdk src={"<YOUR_SDK_URL>"} />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

Replace <YOUR_SDK_URL> with the URL provided in the Edgee console, in the project overview section.

​
When using pages folder structure

Add the EdgeeSdk component in your MyApp component:

import EdgeeSdk from 'react-edgee';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <EdgeeSdk src="<YOUR_SDK_URL>" />
    </>
  );
}

Replace <YOUR_SDK_URL> with the URL provided in the Edgee console, in the project overview section.

​
When using Vite or other frameworks

Add the EdgeeSdk component inside the <Router> component in your App component:

import EdgeeSdk from 'react-edgee';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const App = () => {
  return (
    <div>
      <Router>
        <EdgeeSdk src="<YOUR_SDK_URL>" />
        <Routes>
          {/* Your Routes Here */}
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Replace <YOUR_SDK_URL> with the URL provided in the Edgee console, in the project overview section.

​
🔥 Using the React Hook (useEdgeeDataCollection)

The useEdgeeDataCollection hook simplifies event tracking by providing direct access to the Edgee Data Collection SDK methods.

import { useEdgeeDataCollection } from 'react-edgee';

const MyComponent = () => {
  const { track, user, page, consent } = useEdgeeDataCollection();

  return (
    <>
      <button onClick={() => track({ name: 'button_click' })}>Click Me</button>
      <button onClick={() => user({ user_id: '12345', edgee_id: 'edgee-abc' })}>Identify User</button>
      <button onClick={() => page({ name: 'HomePage', url: 'https://example.com' })}>Track Page</button>
      <button onClick={() => consent('granted')}>Accept Consent</button>
    </>
  );
};

​
Next Steps

For more details about the Edgee SDK, visit the React-Edgee repository.

After integrating the Edgee SDK, you’re ready to start using Edgee’s services.

In the next page, you’ll find comprehensive guides on activating and customizing features such as advanced analytics, A/B testing, security, and more, ensuring your web application not only performs efficiently but also delivers a superior user experience.