diff --git a/README.md b/README.md index e9b6d4c..143d2be 100644 --- a/README.md +++ b/README.md @@ -207,6 +207,21 @@ const Room = ({ roomId }) => { } ``` +### Using the library with class components +For the cases that you need to use the library with class components, import the context and use it as a common [provider/consumer](https://reactjs.org/docs/context.html#reactcreatecontext) component: +``` jsx +import { TrackingContext } from 'treacker' + +class MyClass extends React.Component { + componentDidMount() { + const tracking = this.context; + + tracking.track('user-component.loaded') + } +} +MyClass.contextType = TrackingContext; +``` + ### HOC WIP: `withTracking()` diff --git a/example/child-components.js b/example/child-components.js index c0da728..a969c92 100644 --- a/example/child-components.js +++ b/example/child-components.js @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' -import { useTracking } from '../dist/bundle-esm' +import { useTracking } from '../dist/bundle.esm' const ChildComponent = () => { const tracking = useTracking() diff --git a/example/index.js b/example/index.js index 77fde54..d02b57e 100644 --- a/example/index.js +++ b/example/index.js @@ -1,7 +1,7 @@ import React, { useState } from 'react' import ReactDOM from 'react-dom' -import { TrackingProvider } from '../dist/bundle-esm' +import { TrackingProvider } from '../dist/bundle.esm' import ChildComponent from './child-components' function App () { diff --git a/src/index.js b/src/index.js index fff275b..776de52 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ export { trackingManager } from './lib/tracking' export { registerTrackingListener } from './lib/helpers' export { useTracking } from './react/hooks' -export { TrackingProvider } from './react/provider-consumer' +export { TrackingProvider, TrackingConsumer } from './react/provider-consumer' export { withTracking } from './react/with-tracking' +export { TrackingContext } from './react/context' diff --git a/src/react/provider-consumer.js b/src/react/provider-consumer.js index 2946844..136d45f 100644 --- a/src/react/provider-consumer.js +++ b/src/react/provider-consumer.js @@ -4,6 +4,8 @@ import PropTypes from 'prop-types' import { trackingManager } from '../lib/tracking' import { TrackingContext } from './context' +export const TrackingConsumer = TrackingContext.Consumer + export const TrackingProvider = ({ id, children,