Analytics namespaced context

Examples

Typescript ❤️

Provides a namespace for AnalyticsContext data (@atlaskit/analytics-next)

Install

yarn add @atlaskit/analytics-namespaced-context

npm

@atlaskit/analytics-namespaced-context

Source

Bitbucket

Bundle

unpkg.com

Changelog

Latest

7.0.0

Major Changes

#117363 10a0f7f6c2027 - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026

Patch Changes

Updated dependencies

Fabric Elements analytics context

The main purpose of this component is to provide a namespace for Fabric Elements contextual data related to @atlaskit/analytics-next framework. Rather than AnalyticsContext from @atlaskit/analytics-next, please use FabricElementsAnalyticsContext.

Installation

  npm install @atlaskit/analytics-namespaced-context
  # or
  yarn add @atlaskit/analytics-namespaced-context

Using the component

Example firing an analytics-next event:

import React from 'react';
import {
  withAnalyticsEvents,
  createAndFireEvent,
  AnalyticsListener,
  WithAnalyticsEventsProps
} from '@atlaskit/analytics-next';
import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';

export type Props = WithAnalyticsEventsProps & {
  onClick: (e) => void;
};

class DummyComponent extends React.Component<Props> {
  static displayName = 'DummyComponent';

  render() {
    return (
      <div id="dummy" onClick={this.props.onClick}>
        Test
      </div>
    );
  }
}

export const DummyComponentWithAnalytics = withAnalyticsEvents({
  onClick: createAndFireEvent('fabric-elements')({
      action: 'someAction',
      actionSubject: 'someComponent',
      eventType: 'ui',
    })
})(DummyComponent);

const listenerHandler = (event, context) => {
  console.log('event: ', event, ' context: ', context);
};

const myOnClickHandler = (e): void => {
  console.log('component clicked');
}

// Pass the analyticsWebClient instance created by the Product
ReactDOM.render(
  <div>
    <AnalyticsListener onEvent={listenerHandler} channel="fabricElements">
      <div>
        <FabricElementsAnalyticsContext data={{ greeting: 'hello' }}>
          <DummyComponentWithAnalytics onClick={myOnClickHandler} />
        </FabricElementsAnalyticsContext>
      </div>
    </AnalyticsListener>
  </div>,
  container,
);