The @upstash/edge-flags package provides a React hook, you can use to query flags in your React application.


npm install @upstash/edge-flags


Import the useFlag hook from the @upstash/edge-flags package and pass the name of the flag you want to query.

import { useFlag } from "@upstash/edge-flags";

const MyComponent = () => {
  const { isEnabled, loading, error } = useFlag("my-flag");

  if (error) {
    return <p>Error {error}</p>;

  if (loading) {
    return <p>Loading...</p>;

  return <p>Flag is {isEnabled ? "enabled" : "disabled"}</p>;

Custom Attributes

You can use custom attributes to enable a flag for a subset of users. For example, you can identify users by userId or email.

To set attributes, you can pass an object to the useFlag hook.

import { useFlag } from "@upstash/edge-flags";

const { isEnabled } = useFlag("my-flag", {
  userId: "chronark",
  email: "",