MatomoProvider.tsx

import React, { createContext, useContext } from 'react'
import MatomoTracker, { createInstance } from 'compendium/matomo/MatomoTracker'
import { consentContext } from 'compendium/providers/ConsentProvider'

export interface MatomoProviderProps {
    children?: React.ReactNode
}

export const MatomoContext = createContext<MatomoTracker | null>(null)

const MatomoProvider: React.FC<MatomoProviderProps> = function ({
    children
}) {
    const Context = MatomoContext

    const consent = useContext(consentContext).consent

    const matomoInstance = createInstance({
        urlBase: 'https://prod-swd-webanalytics01.geant.org/',
        siteId: 1,
        disabled: !consent
    });

    return <Context.Provider value={matomoInstance}>{children}</Context.Provider>
}

export default MatomoProvider