React Setup

Follow these steps to get started with ChurnAware in your React project.

Setting up your environment

Install the package

npm install @churnaware/churnaware-react

If you don't already have a ChurnAware appId, head to our website (opens in a new tab) to get started!

Setting up the package

Import the package of the root of you application. Below is an example of importing the package inside a Next.js application with the pages router.

Make sure you paste in the appId you received from your configuration settings (opens in a new tab) as a prop to the ChurnAware component.

In addition, make sure to import the stylesheet from the package.

import { ChurnAware } from "@churnaware/churnaware-react";
import "@churnaware/churnaware-react/dist/index.css";
 
const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => {
  const getLayout = Component.getLayout ?? ((page) => page);
 
  return (
    <div className={GeistSans.className}>
      <ChurnAware appId="..." />
      {getLayout(<Component {...pageProps} />)}
    </div>
  );
};
 
export default MyApp;

That's it!

You're ready to start using ChurnAware in your React application.

Introduction React