👩🔬
react-analytics Convenience component for creating a connection to segment.
Values provided on context and useAnalytics:
-
analyticsReady
: boolean -
identify
: function -
alias
: function -
trackPageView
: function -
track
: function -
reset
: function
Provider Props
-
children
: the contained react components -
segmentWriteToken
: the segment key
Setup
Import the provider and wrap your application in it.
import { AnalyticsProvider } from '@dapperlabs/react-analytics';
function Root() {
return (
<AnalyticsProvider
segmentWriteToken={process.env.SEGMENT_WRITE_TOKEN}
>
<MyDApp />
</AnalyticsProvider>
)
}
Usage
Context is directly available via import { AnalyticsContext } from '@dapperlabs/react-analytics'
but for more convenience you can use a hook import { useAnalytics } from '@dapperlabs/react-analytics'
import React, { useRef } from 'react';
import { useAnalytics } from '@dapperlabs/react-analytics';
function Button({ children, id, onClick, trackingProperties }) {
const { track } = useAnalytics();
const handleClick = () => {
track('event name', {
text: buttonRef.current.innerText || 'BUTTON_HAS_NO_TEXT',
id: id || 'BUTTON_HAS_NO_ID',
...trackingProperties,
});
onClick();
};
return (
<button
ref={buttonRef}
type="button"
onClick={handleClick}
id={id}
>
{children}
</button>
);
}