@ttoss/react-feature-flags/dist/index.mjs

React Feature Flags

/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
import * as React from "react";
import { ErrorBoundary } from "react-error-boundary";
import { jsx } from "react/jsx-runtime";

//#region src/FeatureFlagsProvider.tsx
var FeatureFlagsContext = React.createContext({
  features: [],
  setFeatures: () => {}
});
var FeatureFlagsProvider = ({
  children,
  loadFeatures
}) => {
  const [features, setFeatures] = React.useState([]);
  React.useEffect(() => {
    loadFeatures?.().then(features => {
      return setFeatures(features);
    });
  }, [loadFeatures]);
  return /* @__PURE__ */jsx(FeatureFlagsContext.Provider, {
    value: {
      features,
      setFeatures
    },
    children
  });
};

//#endregion
//#region src/useFeatureFlag.ts
var useFeatureFlag = name => {
  const {
    features
  } = React.useContext(FeatureFlagsContext);
  return features.includes(name);
};

//#endregion
//#region src/FeatureFlag.tsx
var FeatureFlag = ({
  name,
  children,
  fallback = null,
  errorFallback = null
}) => {
  if (!useFeatureFlag(name)) return fallback;
  return /* @__PURE__ */jsx(ErrorBoundary, {
    fallback: errorFallback,
    children
  });
};

//#endregion
//#region src/useUpdateFeatures.ts
/**
* If you want to update the feature flags on React environment
* (after the initial render and providers), you can use this hook.
*/
var useUpdateFeatures = () => {
  const {
    setFeatures
  } = React.useContext(FeatureFlagsContext);
  return {
    updateFeatures: setFeatures
  };
};

//#endregion
export { FeatureFlag, FeatureFlagsProvider, useFeatureFlag, useUpdateFeatures };