Skip to content

Latest commit

 

History

History
140 lines (92 loc) · 3.79 KB

README.md

File metadata and controls

140 lines (92 loc) · 3.79 KB

Getting started

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

  1. Create your first feature flag.
  2. Install the Reflag SDK.
  3. Set feature access rules and/or remote configuration.
  4. Enable Toolbar for local testing
  5. Monitor your feature launch.

1. Create your first flag

Now let's create your first flag.

{% tabs %} {% tab title="CLI" %}

npx @reflag/cli new

See CLI docs. {% endtab %}

{% tab title="UI" %}

  1. Sign up in the app
  2. Click New flag in the sidebar.
  3. Give your feature a name, and we'll suggest a flag key .

{% endtab %}

{% tab title="MCP" %} You can create features from your code editor via our MCP. {% endtab %}

{% tab title="Linear" %} You can create features from within Linear by mentioning the @reflag agent. {% endtab %} {% endtabs %}

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

2. Install the Reflag SDK

Find the supported languages below:

{% include ".gitbook/includes/sdks.md" %}

Code example for React

If you've installed the React SDK and have created a feature called my-new-feature, getting started will look like the following:

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

const MyFeature = () => {
  const { isEnabled } = useFlag("my-new-feature");

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

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

3. Set access rules

Head back over to your dashboard, select your feature and the Access tab.

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

4. Enable Toolbar for local testing

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

In the React SDK, you enable it with toolbar:

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

5. Monitor your feature launch

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

Track exposure

The Exposed chart shows you companies that have been exposed to your feature. This means, companies that have been checked for feature access as per your targeting rules and the check return "enabled".

Track adoption

To track if exposed companies are also interacting with your feature, you can 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 MyFeature = () => {
  const { isEnabled, requestFeedback } = useFlag("my-new-feature");

  if (!isEnabled) {
    return null;
  }

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

Get support