Getting started

Welcome! Let's get started. We'll do the following:

Create your first flag.
Install the Reflag SDK.
Set flag access rules and/or remote config.
Enable Toolbar for local testing
Monitor your flag launch.

1. Create your first flag

Now let's create your first flag.

npx @reflag/cli new

See CLI docs.

Next, let's set up a Reflag SDK for your language and framework.

2. Install the Reflag SDK

Find the supported languages below:

React

React Native

Vue.js

Client-side

Server-side

Next.js

Reflag supports OpenFeature

Don't use these languages or frameworks? Use our API

Code example for React

If you've installed the React SDK and created a flag called my-new-flag, getting started looks like this:

import { useFlag } from "@reflag/react-sdk";

const MyFlag = () => {
  const { isEnabled } = useFlag("my-new-flag");

  return isEnabled ? "You have access!" : null;
};

You can now use isEnabled to gate access to the flag.

3. Set access rules

Head back to your dashboard, select your flag, and open the Access tab.

From here, you can define segments, companies, and users that will access your flag.

4. Enable Toolbar for local testing

In the frontend SDK, enable the Toolbar to toggle flags locally.

In the React SDK, you enable it with toolbar:

<ReflagProvider
   publishableKey=""
   context={}
   toolbar={true}
>

5. Monitor your flag launch

On the Monitor tab, you can track real-time flag exposure, adoption, and user feedback.

Track exposure

The Exposed chart shows companies that have been exposed to your flag. This means they were checked for flag access against your targeting rules and the check returned enabled.

Track adoption

To track whether exposed companies are also interacting with your flag, use track.

See the code example below.

Get user feedback

To get feedback from your users, you can add a static "Feedback" button or you can trigger a survey, at the right time.

Here's an example with a static feedback button.

import { useFlag } from "@reflag/react-sdk";

const MyFlag = () => {
  const { isEnabled, track, requestFeedback } = useFlag("my-new-flag");

  if (!isEnabled) {
    return null;
  }

  return (
    <>
      <button onClick={() => track()}>Try it</button>
      <button
        onClick={() => requestFeedback({ title: "How do you like this new release?" })}
      >
        Give feedback
      </button>
    </>
  );
}

Get support

Need some help? Chat with us
Latest product updates? See Changelog
Create account: Sign up

NextOverview

Last updated 1 month ago

Was this helpful?