react-native-clarity

react-native-clarity

A ReactNative plugin that allows integrating Clarity with your application.

Installation

npm install react-native-clarity

Usage

import { initialize, setCustomUserId, getCurrentSessionId, setCurrentScreenName, setCustomTag } from 'react-native-clarity';

// Initialize Clarity.
initialize("<ProjectId>");

// Set custom user id.
setCustomUserId("[e-mail]");

// Set custom tag.
setCustomTag("key", "value");

// Get current session id to correlate with other tools.
getCurrentSessionId().then((id) => {...});

// Setting the current screen name when using React Navigation
import { ..., useFocusEffect } from '@react-navigation/native';

const HomeScreen = ({...}) => {
  useFocusEffect(
    React.useCallback(() => {
      setCurrentScreenName("Home");

      // To clear the current screen name when the screen goes out of focus:
      return () => { setCurrentScreenName(undefined); }
    }, [])
  );
  ...
};

Initialization arguments

/**
 * Initializes the Clarity plugin with the provided parameters.
 *
 * @param projectId     The Clarity project id to send data to.
 * @param userId        A custom identifier for the current user. If passed as undefined, the user id
 *                      will be auto generated. The user id in general is sticky across sessions.
 *                      The provided user id must follow these conditions:
 *                          1. Cannot be an empty string.
 *                          2. Should be base36 and smaller than "1Z141Z4".
 * @param logLevel      The level of logging to show in the device logcat stream ("Verbose", "Debug", "Info", "Warning", "Error", "None").
 * @param allowMeteredNetworkUsage  Allows uploading session data to the servers on device metered network.
 * @param enableWebViewCapture    Allows Clarity to capture the web views DOM content.
 * @param allowedDomains    The whitelisted domains to allow Clarity to capture their DOM content.
 *                          If it contains "*" as an element, all domains will be captured.
 */
function initialize(
  projectId: string,
  userId?: string,
  logLevel: string = "None",
  allowMeteredNetworkUsage: boolean = false,
  enableWebViewCapture: boolean = true,
  allowedDomains: string[] = ["*"])

License

MIT