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> ); }

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 />);

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 />);

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 />);