Provider

Basic Usage

A single Provider "Feature A" wraps a Kyber Button component.

Result

Loading...

Live Editor

function TrackableFeature() {
  const [trackedPath, setTrackedPath] = React.useState([]);

  return (
    <Provider
      value="Feature A"
      onTrack={(propertyMap, action, event) => {
        setTrackedPath(propertyMap.path);

        console.log('propertyMap', propertyMap);
        console.log('action', action);
        console.log('event', event);
      }}
    >
      <Button onClick={() => {}}>Awesome Button</Button>

      <hr />

      <div>Full tracked path: {trackedPath.join(' ➡️ ')}</div>
    </Provider>
  );
}

With Multiple Nested Providers

Result

Loading...

Live Editor

const headerStyles = {
  color: 'white',
};

const featureStyles = {
  padding: 10,
};

const featureAStyles = {
  ...featureStyles,
  backgroundColor: '#105c8e',
};

const featureBStyles = {
  ...featureStyles,
  backgroundColor: '#a24936',
  marginTop: 10,
};

const featureCStyles = {
  ...featureStyles,
  backgroundColor: '#2c1320',
  marginTop: 10,
};

function TrackableFeature() {
  const [trackedPath, setTrackedPath] = React.useState([]);

  return (
    <Provider
      value="Feature A"
      onTrack={(propertyMap, action, event) => {
        setTrackedPath(propertyMap.path);

        console.log('propertyMap', propertyMap);
        console.log('action', action);
        console.log('event', event);
      }}
    >
      <div style={featureAStyles}>
        <h2 style={headerStyles}>Feature A</h2>
        <Button onClick={() => {}}>Awesome Button</Button>

        <Provider value="Feature B">
          <div style={featureBStyles}>
            <h3 style={headerStyles}>Feature B</h3>
            <Button onClick={() => {}}>Better Button</Button>

            <Provider value="Feature C">
              <div style={featureCStyles}>
                <h3 style={headerStyles}>Feature C</h3>
                <Button onClick={() => {}}>Best Button</Button>
              </div>
            </Provider>
          </div>
        </Provider>
      </div>

      <hr />

      <div>Full tracked path: {trackedPath.join(' ➡️ ')}</div>
    </Provider>
  );
}

render(<TrackableFeature />);

With Properties Set on Providers

It's possible to bind a property to a value on the Provider. The following example creates an application structure where two features: Navigation and Content have their tracking objects mapped by these properties. This is useful in situations where custom key/value pairs are associated with specific areas of an application.

If providers are not given a property their values will be included in the path property of the onTrack callback's first argument.

Result

Loading...

Live Editor

const headerStyles = {
  color: 'white',
};

const featureStyles = {
  padding: 10,
};

const featureAStyles = {
  ...featureStyles,
  backgroundColor: '#105c8e',
};

const featureBStyles = {
  ...featureStyles,
  backgroundColor: '#a24936',
  marginTop: 10,
};

const featureCStyles = {
  ...featureStyles,
  backgroundColor: '#2c1320',
  marginTop: 10,
  flex: 1,
};

function TrackableFeature() {
  const [trackedPath, setTrackedPath] = React.useState({});

  return (
    <Provider
      value="Voltron"
      property="application"
      onTrack={(propertyMap, action, event) => {
        setTrackedPath(propertyMap);

        console.log('fullPath', propertyMap);
        console.log('action', action);
        console.log('event', event);
      }}
    >
      <div style={featureAStyles}>
        <h2 style={headerStyles}>Application (Voltron)</h2>

        <Provider value="Documentation" property="platform">
          <div style={featureBStyles}>
            <h3 style={headerStyles}>Platform (Documentation)</h3>

            <div style={{ display: 'flex' }}>
              <Provider value="Navigation" property="feature">
                <div style={{ ...featureCStyles, marginRight: 5 }}>
                  <h3 style={headerStyles}>Feature (Navigation)</h3>
                  <Button onClick={() => {}}>Navigation Item</Button>
                </div>
              </Provider>

              <Provider value="Content" property="feature">
                <div style={{ ...featureCStyles, flex: 2, marginLeft: 5 }}>
                  <h3 style={headerStyles}>Feature (Content)</h3>
                  <Button onClick={() => {}}>Content Button</Button>
                </div>
              </Provider>
            </div>
          </div>
        </Provider>
      </div>

      <hr />

      <div>
        Full tracked object: <pre>{JSON.stringify(trackedPath, null, 2)}</pre>
      </div>
    </Provider>
  );
}

render(<TrackableFeature />);