sibelius · May 6, 2020 12:33 · May 6, 2020
diff --git a/FeatureFlag.tsx b/FeatureFlag.tsx
@@ -0,0 +1,37 @@
+import React, { useContext, useCallback } from 'react';
+
+export const FeatureFlagContext = React.createContext<string[]>([]);
+
+export const useFeatureFlag = () => {
+  const features = useContext<string[]>(FeatureFlagContext);
+
+  const hasFeature = useCallback(
+    (feature: string) => {
+      return features.includes(feature);
+    },
+    [features]
+  );
+
+  return {
+    hasFeature
+  };
+};
+
+type Props = {
+  feature: string;
+  children: React.ReactNode;
+  fallbackComponent?: React.ReactNode;
+};
+export const FeatureFlag = ({
+  feature,
+  fallbackComponent = null,
+  children
+}: Props) => {
+  const { hasFeature } = useFeatureFlag();
+
+  if (!hasFeature(feature)) {
+    return fallbackComponent;
+  }
+
+  return children;
+};
diff --git a/FeatureFlagUsage.tsx b/FeatureFlagUsage.tsx
@@ -0,0 +1,22 @@
+export const AppFeatureFlags = {
+  TEMP: 'TEMP' // special feature flag that should wrap all WIP code
+  // TODO - add more features as you need 
+};
+
+export const getFeatureFlags = () => {
+  if (process.env.NODE_ENV === 'development') {
+    return [AppFeatureFlags.TEMP];
+  }
+
+  return [];
+};
+
+
+const Providers = ({ children }) => {
+  const features = useMemo(() => getFeatureFlags(), []);
+  return (
+    <FeatureFlagContext.Provider value={features}>
+      {children}
+    </FeatureFlagContext.Provider>
+  )
+}