Amiplitude provider for integrate and using amplitude in react project properly

AmplitudeProvider.tsx

import React, { createContext, useContext, useEffect } from 'react'
import * as amplitude from '@amplitude/analytics-browser'

interface AmplitudeContextType {
  track: (eventName: string, eventProperties?: Record<string, any>) => void
  identify: (userId: string) => void
}

const AmplitudeContext = createContext<AmplitudeContextType | undefined>(undefined)

export interface AmplitudeProviderProps {
  children: React.ReactNode
  apiKey: string
}

export const AmplitudeProvider: React.FC<AmplitudeProviderProps> = ({ children, apiKey }) => {
  useEffect(() => {
    if (!apiKey) return

    amplitude.init(apiKey, undefined, {
      defaultTracking: {
        sessions: true,
        pageViews: true,
        formInteractions: true,
        fileDownloads: true,
      },
      fetchRemoteConfig: true,
      autocapture: true,
      serverZone: amplitude.Types.ServerZone.EU,
    })
  }, [apiKey])

  const track = (eventName: string, eventProperties?: Record<string, any>) => {
    if (apiKey) {
      amplitude.track(eventName, eventProperties)
    }
  }

  const identify = (userId: string) => {
    amplitude.setUserId(userId)
  }

  return (
    <AmplitudeContext.Provider value={{ track, identify }}>{children}</AmplitudeContext.Provider>
  )
}

export const useAmplitude = () => {
  const context = useContext(AmplitudeContext)
  if (context === undefined) {
    throw new Error('useAmplitude must be used within an AmplitudeProvider')
  }
  return context
}

AmplitudeProviderChromeExt.tsx

import React, { createContext, useContext, useEffect } from 'react'
import * as amplitude from '@amplitude/analytics-browser'
import { autocapturePlugin } from '@amplitude/plugin-autocapture-browser'

interface AmplitudeContextType {
  track: (eventName: string, eventProperties?: Record<string, any>) => void
  identify: (userId: string) => void
}

const AmplitudeContext = createContext<AmplitudeContextType | undefined>(undefined)

export interface AmplitudeProviderProps {
  children: React.ReactNode
  apiKey: string
}

export const AmplitudeProvider: React.FC<AmplitudeProviderProps> = ({ children, apiKey }) => {
  useEffect(() => {
    if (!apiKey) return

    const plugin = autocapturePlugin()

    amplitude.add(plugin)
    
    amplitude.init(apiKey, undefined, {
      defaultTracking: {
        sessions: true,
        pageViews: true,
        formInteractions: true,
        fileDownloads: true,
      },
      fetchRemoteConfig: true,
      autocapture: true,
      serverZone: amplitude.Types.ServerZone.EU,
    })
  }, [apiKey])

  const track = (eventName: string, eventProperties?: Record<string, any>) => {
    if (apiKey) {
      amplitude.track(eventName, eventProperties)
    }
  }

  const identify = (userId: string) => {
    amplitude.setUserId(userId)
  }

  return (
    <AmplitudeContext.Provider value={{ track, identify }}>{children}</AmplitudeContext.Provider>
  )
}

export const useAmplitude = () => {
  const context = useContext(AmplitudeContext)
  if (context === undefined) {
    throw new Error('useAmplitude must be used within an AmplitudeProvider')
  }
  return context
}