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.

​
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 <body> tag of your RootLayout component:

import EdgeeSdk from "react-edgee";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <EdgeeSdk src={"<YOUR_SDK_URL>"} />
      </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.

​
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.

JS SDKMigration guide