Skip to main content

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

useSurveysEnabled

A hook that checks whether the surveys feature is enabled in the application settings.

Source file: template/hooks/use-surveys-enabled.ts

Overview​

useSurveysEnabled reads the surveysEnabled flag from the SettingsProvider context. Because the value is server-rendered and passed through React context, there is no loading delay or network request -- the result is available immediately on mount.

When surveys are enabled, the application can display survey prompts to users. This hook controls whether the survey subsystem is active at all. To check whether specific global surveys are available to display, use useHasGlobalSurveys instead.

Signature​

function useSurveysEnabled(): {
  surveysEnabled: boolean;
  loading: boolean;
  error: Error | null;
}

Parameters​

This hook takes no parameters.

Return Value​

PropertyTypeDescription
surveysEnabledbooleantrue if the surveys feature is enabled in application settings, false otherwise
loadingbooleanAlways false -- the value is available synchronously from context
errorError | nullAlways null -- no asynchronous operation is performed

Fallback Behavior​

If the component is rendered outside of a SettingsProvider, the hook falls back to surveysEnabled: true (the provider's default fallback value).

Implementation Details​

  1. The hook calls useSettings() to access the SettingsProvider context.
  2. It destructures the surveysEnabled boolean from the context value.
  3. It returns the value along with loading: false and error: null, since the value comes from server-rendered context and involves no asynchronous fetching.

Usage Examples​

Conditionally rendering the survey banner​

import { useSurveysEnabled } from '@/hooks/use-surveys-enabled';

function AppLayout({ children }: { children: React.ReactNode }) {
  const { surveysEnabled } = useSurveysEnabled();

  return (
    <div>
      <Header />
      {surveysEnabled && <SurveyBanner />}
      <main>{children}</main>
      <Footer />
    </div>
  );
}

Guarding the survey admin section​

import { useSurveysEnabled } from '@/hooks/use-surveys-enabled';

function AdminSurveysPage() {
  const { surveysEnabled } = useSurveysEnabled();

  if (!surveysEnabled) {
    return (
      <DisabledFeatureNotice
        feature="Surveys"
        description="Enable surveys in your application settings to start collecting feedback."
      />
    );
  }

  return <SurveyManagementDashboard />;
}

Combined with useHasGlobalSurveys​

import { useSurveysEnabled } from '@/hooks/use-surveys-enabled';
import { useHasGlobalSurveys } from '@/hooks/use-has-global-surveys';

function GlobalSurveyPrompt() {
  const { surveysEnabled } = useSurveysEnabled();
  const { hasGlobalSurveys } = useHasGlobalSurveys();

  // Only show prompt when surveys are enabled AND global surveys exist
  if (!surveysEnabled || !hasGlobalSurveys) {
    return null;
  }

  return <SurveyModal />;
}

Requirements​

DependencyPurpose
SettingsProviderProvides the surveysEnabled value through React context