https://github.com/edgee-cloud/react-edgee
ReactJS component that injects the Edgee SDK
https://github.com/edgee-cloud/react-edgee
edge-computing edgee nextjs react
Last synced: about 1 year ago
JSON representation
ReactJS component that injects the Edgee SDK
- Host: GitHub
- URL: https://github.com/edgee-cloud/react-edgee
- Owner: edgee-cloud
- License: mit
- Created: 2024-07-16T16:37:53.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-09T15:11:25.000Z (about 1 year ago)
- Last Synced: 2025-04-09T16:26:57.618Z (about 1 year ago)
- Topics: edge-computing, edgee, nextjs, react
- Language: TypeScript
- Homepage: https://www.edgee.cloud
- Size: 249 KB
- Stars: 3
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# react-edgee Component
`react-edgee` is a React component that injects the Edgee SDK script into a React application.
It also sets up listeners to track page navigations via `history.pushState` and `history.replaceState`
to automatically call the `edgee.page` method, ensuring page views are tracked during SPA navigations, and provides a **React Hook** (`useEdgeeDataCollection`) to simplify event tracking (`track`, `user`, `page`, `consent`).
[](https://www.npmjs.com/package/react-edgee)
[](https://www.npmjs.com/package/react-edgee)
## Install
using npm:
```bash
npm install react-edgee
```
using yarn:
```bash
yarn add react-edgee
```
## Usage
import using:
```js
import { EdgeeSdk, EdgeeDataLayer, EdgeeDataLayerObject } from 'react-edgee';
```
### Edgee Data Layer configuration
The Data Layer provides you with fine-grained control over the data sent to various analytics.
It is a structured data format used to define and send detailed information about user interactions
and page characteristics.
By including a Data Layer, you can instruct Edgee on what data to collect, how to process it, and where to send it.
```js
import { EdgeeDataLayerObject, EdgeeDataLayer } from "react-edgee";
const edgeeDataLayer: EdgeeDataLayerObject = {
// your Data Layer configuration here
};
```
To learn more about the Data Layer object,
visit the [Edgee Data Layer docs](https://www.edgee.cloud/docs/services/data-collection/data-layer).
### When using `app` folder structure
Add the `EdgeeSdk` and `EdgeeDataLayer` components inside the `` tag of your `RootLayout` component:
```js
export default function RootLayout({ children }) {
return (
{children}
"} />
);
}
```
### When using `pages` folder structure
Add the `EdgeeSdk` and `EdgeeDataLayer` components in your `MyApp` component:
```js
export default function MyApp({ Component, pageProps }) {
return (
<>
>
);
}
```
### When using Vite or other frameworks
Add the `EdgeeSdk` and `EdgeeDataLayer` component inside the `` component in your `App`:
```js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const App = () => {
return (
{/* Your Routes Here */}
);
}
export default App;
```
### 🔥 Using the React Hook (`useEdgeeDataCollection`)
The `useEdgeeDataCollection` hook simplifies event tracking by providing direct access to the Edgee [SDK methods](https://www.edgee.cloud/docs/services/data-collection/overview).
```js
import { useEdgeeDataCollection } from 'react-edgee';
const MyComponent = () => {
const { track, user, page, consent } = useEdgeeDataCollection();
return (
<>
track({ name: 'button_click' })}>Click Me
user({ user_id: '12345', edgee_id: 'edgee-abc' })}>Identify User
page({ name: 'HomePage', url: 'https://example.com' })}>Track Page
consent('granted')}>Accept Consent
>
);
};
```
To learn more about the Edgee SDK, visit the [Edgee SDK documentation](https://www.edgee.cloud/docs/getting-started/sdk).