amplitude-react-hooks v1.0.0

Use amplitude-js as React hooks. Encourage consistency when declaring commonly used event names by using pre-configured hooks with TypeScript definitions. Use track and identify methods for instrumenting any custom events and user properties.

Installation

yarn add amplitude-js amplitude-react-hooks

Or if using npm

npm install amplitude-js amplitude-react-hooks

How to use

First, wrap your app with the AmplitudeProvider component. Replace API_KEY with the Amplitude API Key given to you. You can find your project's API Key in your project's Settings page.

import React from "react";
import { AmplitudeProvider } from "amplitude-react-hooks";

const App = () => (
  <AmplitudeProvider API_KEY={`YOUR_AMPLITUDE_API_KEY`}>
    <MyRootComponent />
  </AmplitudeProvider>
);

render(<App />, document.getElementById("root"));

Under the hood, the library will load amplitude-js and call the following methods:

amplitude.getInstance().init("YOUR_AMPLITUDE_API_KEY");

Tracking pre-configured, commonly used events

User viewed a page

import React from "react";
import { useAmplitude } from "amplitude-react-hooks";

const PricingPage = () => {
  const { trackPageViewed } = useAmplitude();

  // Fire once when component mounts
  useEffect(() => {
    trackPageViewed("Pricing");
  }, []);

  return <div>Pricing page</div>;
};

export default PricingPage;

Under the hood, the library will load amplitude-js and call the following methods:

amplitude.getInstance().logEvent("Pricing Page Viewed");

User signed up

import React from "react";
import { useAmplitude } from "amplitude-react-hooks";
import { performSignup } from "../../helpers/signup";

const SignupPage = () => {
  const { trackSignedUp } = useAmplitude();

  return (
    <form
      onSubmit={e => {
        e.preventDefault();
        const { user } = await performSignup();
        trackSignedUp({
          id: user.id,
          email: user.email,
          name: user.name
        });
      }}
    >
      <input type="email" placeholder="Email address" />
      <input type="name" placeholder="Name" />
      <input type="password" placeholder="Password" />
      <button type="submit">Sign up</button>
    </form>
  );
};

export default SignupPage;

Under the hood, the library will call the following methods:

amplitude.getInstance().logEvent("User Signed Up", {
  id: "123",
  email: "email@example.com",
  name: "John Doe"
});

var userProperties = {
  id: "123",
  email: "email@example.com",
  name: "John Doe"
};
amplitude.getInstance().setUserProperties(userProperties);

User upgraded to a paid plan

import React from "react";
import { useAmplitude } from "amplitude-react-hooks";
import { subscribeToPlan } from "../../helpers/billing";

const PaymentsPage = () => {
  const { trackUpgradedToPaid } = useAmplitude();

  return (
    <form
      onSubmit={e => {
        e.preventDefault();
        const { subscription } = await subscribeToPlan({
          planId: "basic",
          interval: "month",
          source: "tok_mastercard",
          customerId: "cus_9fYy2VJUHCLMB1"
        });
        trackUpgradedToPaid({
          id: subscription.id,
          plan: subscription.planId,
          interval: subscription.interval,
          amount: subscription.amount
        });
      }}
    >
      <input name="cc_number" placeholder="Credit card number" />
      <input name="exp_month" placeholder="Expiry month" />
      <input name="exp_year" placeholder="Expiry year" />
      <input name="last4" placeholder="Security Code" />
      <input name="interval" value="month" type="radio" checked />
      <input name="interval" value="year" type="radio" />
      <select name="planId" value="basic">
        <option value="basic">Basic</option>
        <option value="premium">Premium</option>
        <option value="enterprise">Enterprise</option>
      </select>
      <button type="submit">Subscribe</button>
    </form>
  );
};

export default PaymentsPage;

Under the hood, the library will call the following methods:

amplitude.getInstance().logEvent("Upgraded To Paid Plan", {
  id: "sub_9h6CopvY0Fldnj",
  planId: 'basic';
  billingInterval: 'month',
  amount: 99000,
  paymentProviderCustId: 'cus_9fYy2VJUHCLMB1';
});

var userProperties = {
  id: "123",
  plan: {
    id: 'basic',
    interval: 'month'
    amount: 99000,
    subscriptionId: 'sub_9h6CopvY0Fldnj',
    customerId: 'cus_9fYy2VJUHCLMB1',
  }
};
amplitude.getInstance().setUserProperties(userProperties);

Tracking custom events

Track any event

import React from "react";
import { useAmplitude } from "amplitude-react-hooks";
import { performSignup } from "../../helpers/signup";

const SignupPage = () => {
  const { track } = useAmplitude();

  return (
    <form
      onSubmit={e => {
        e.preventDefault();
        const { user } = await performSignup();
        track("Submitted Signed Up", {
          id: user.id,
          email: user.email,
          name: user.name
        });
      }}
    >
      <input type="email" placeholder="Email address" />
      <input type="name" placeholder="Name" />
      <input type="password" placeholder="Password" />
      <button
        onClick={e => {
          track("Clicked Sign Up");
        }}
        type="submit"
      >
        Sign up
      </button>
    </form>
  );
};

export default SignupPage;

Under the hood, the library will call the following methods:

amplitude.getInstance().logEvent("Clicked Sign Up");
amplitude.getInstance().logEvent("Submitted Signed Up", {
  id: "123",
  email: "email@example.com",
  name: "John Doe"
});

Identifying users

Setting user properties to identify the user

import React from "react";
import { useAmplitude } from "amplitude-react-hooks";
import { performSignup } from "../../helpers/signup";

const SignupPage = () => {
  const { identify } = useAmplitude();

  return (
    <form
      onSubmit={e => {
        e.preventDefault();
        const { user } = await performSignup();
        identify({
          id: user.id,
          email: user.email,
          name: user.name
        });
      }}
    >
      <input type="email" placeholder="Email address" />
      <input type="name" placeholder="Name" />
      <input type="password" placeholder="Password" />
      <button type="submit">Sign up</button>
    </form>
  );
};

export default SignupPage;

Under the hood, the library will call the following methods:

var userProperties = {
  id: "123",
  email: "email@example.com",
  name: "John Doe"
};
amplitude.getInstance().setUserProperties(userProperties);