use-clarity v0.7.32

Features

• Hooks
• Written in TypeScript
• Documented, self explaining methods

Installation

# npm
npm install use-clarity

# yarn
yarn add use-clarity

Quickstart

import * as React from 'react';

import { ClarityProvider, useClarity } from 'use-clarity';

const CLARITY_PROJECT_ID = 'your-clarity-project-id';

const App = () => (
  <ClarityProvider clarityId={CLARITY_PROJECT_ID}>
    <HomePage />
  </ClarityProvider>
);

const HomePage = () => {
  const { userId } = useUserContext();
  const { identify } = useClarity();

  React.useEffect(() => {
    identify(userId);
  }, [userId]);

  return <div>Hi I'm a homepage</div>;
};

Context

This library is a React abstraction of Clarity. use-clarity tries to keep as close as a one-on-one abstraction of the "vanilla" Clarity functionality.

Links

• API
• TypeScript

API

• ClarityProvider
• useClarity

ClarityProvider

ClarityProvider is used to initialize the window.clarity instance.

Place the ClarityProvider as high as possible in your application. This will make sure you can call useClarity anywhere.

Props

Example

const App = () => {
  return (
    <ClarityProvider clarityId={CLARITY_PROJECT_ID}>
      <p>Hi there, I am a child of the ClarityProvider</p>
    </ClarityProvider>
  );
};

useClarity

Used to retrieve all methods bundled with Clarity. These are based on the official Clarity API docs and Clarity Identify API docs. We provide full access to the internals, with additional helper methods.

Make sure ClarityProvider is wrapped around your component when calling useClarity().

Remark - You can't use useClarity() in the same component where ClarityProvider is initialized.

API

Next Up

• Add tests
• Add more examples