React

Our React integration works with React 16.8.0 or later. It works with SPAs as well as server side rendered apps.

💡

If you're using Next.js please check out our Next integration

Installation

To get started make sure to install the package using your favorite package manager.

npm i @tryabby/react

Create your config

To use Abby you need to create your config first. You can do this by creating a file called abby.config.ts in your root folder. This file will be used to configure your project.

// abby.config.ts
import { defineConfig } from "@tryabby/react";
 
export default defineConfig({
  projectId: "<YOUR_PROJECT_ID>",
  currentEnvironment: process.env.NODE_ENV,
  environments: ["production", "development"],
  tests: {
    test: { variants: ["A", "B"] },
    footer: { variants: ["dark", "orange", "green"] },
    // ... your tests
  },
  flags: ["darkMode", "newFeature"],
  remoteConfig: {
    customButtonText: "String",
  },
});

Create your Instance

To use Abby in your code you will need to create a typed Hook and Provider first. You can do this by using the createAbby function. Please copy the id of your project from the dashboard to get started.

import { createAbby } from "@tryabby/react";
import abbyConfig from "../abby.config";
 
export const { AbbyProvider, useAbby, useFeatureFlag, useRemoteConfig } = createAbby(abbyConfig);

Wrap your Application

You will need to wrap your application with the AbbyProvider to make sure the hook works. If you're using Next.js you should do this in the _app.js file.

You can now import the hooks created by createAbby and use it in your components.

Usage

useAbby

The useAbby hook returns an object with the following values:

variant - The variant that is currently active
onAct - A function that you can call to trigger any kind of interaction with the tested component (will be used to track conversions)

import { useAbby } from "./abby";
 
function MyButton() {
  const { variant, onAct } = useAbby("footer");
  return (
    <main className="p-6">
      <h1>Abby Test Page:</h1>
      <button
        className={`rounded-lg py-2 px-4 
        ${variant === "dark" && "bg-gray-900 text-white"} 
        ${variant === "orange" && "bg-orange-500 text-white"} 
        ${variant === "green" && "bg-green-500 text-white"}`}
        onClick={onAct}
      >
        Cool Button
      </button>
    </main>
  );
}

Optionally, you can pass a lookup object to automatically map the selected variant to a custom value.

import { useAbby } from "./abby";
 
function MyButton() {
  const { variant, onAct } = useAbby("footer", {
    dark: "bg-gray-900",
    orange: "bg-orange-500",
    green: "bg-green-500",
  });
 
  return (
    <main className="p-6">
      <h1>Abby Test Page:</h1>
      <button className={`rounded-lg py-2 px-4 text-white ${variant}`} onClick={onAct}>
        Cool Button
      </button>
    </main>
  );
}

useFeatureFlag

The useFeatureFlag hook returns a boolean value that indicates if the flag is active or not.

import { useFeatureFlag } from "./abby";
 
function HomePage() {
  const hasNewFeature = useFeatureFlag("newFeature");
 
  return (
    <main className="p-6">
      <h1>Welcome back, User</h1>
      {hasNewFeature && <p>Here is the new feature</p>}
      <p>This is our super boring page</p>
    </main>
  );
}

useRemoteConfig

The useRemoteConfig hook returns a value as specified in your abby.config.ts. The type of the returned value will automatically be inferred from your config.

import { useRemoteConfig } from "./abby";
 
function HomePage() {
  const customButtonText = useRemoteConfig("customButtonText");
 
  return (
    <main className="p-6">
      <h1>Welcome back, User</h1>
      <button>{customButtonText}</button>
    </main>
  );
}

Next.js Remix