Skip to main content

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

useCompaniesEnabled

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

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

Overview​

useCompaniesEnabled reads the companiesEnabled 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 companies are enabled, items can be associated with company profiles, and company-related UI elements (company pages, company badges on items, company filters) become visible throughout the application.

Signature​

function useCompaniesEnabled(): {
  companiesEnabled: boolean;
  loading: boolean;
  error: Error | null;
}

Parameters​

This hook takes no parameters.

Return Value​

PropertyTypeDescription
companiesEnabledbooleantrue if the companies 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 companiesEnabled: true (the provider's default fallback value).

Implementation Details​

  1. The hook calls useSettings() to access the SettingsProvider context.
  2. It destructures the companiesEnabled 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 showing company information on item cards​

import { useCompaniesEnabled } from '@/hooks/use-companies-enabled';

function ItemCard({ item }: { item: Item }) {
  const { companiesEnabled } = useCompaniesEnabled();

  return (
    <div className="item-card">
      <h3>{item.title}</h3>
      <p>{item.description}</p>
      {companiesEnabled && item.company && (
        <CompanyBadge company={item.company} />
      )}
    </div>
  );
}
import { useCompaniesEnabled } from '@/hooks/use-companies-enabled';

function SearchFilters() {
  const { companiesEnabled } = useCompaniesEnabled();

  return (
    <div className="filters">
      <CategoryFilter />
      <TagFilter />
      {companiesEnabled && <CompanyFilter />}
      <PriceFilter />
    </div>
  );
}

Guarding a company profile page​

import { useCompaniesEnabled } from '@/hooks/use-companies-enabled';
import { notFound } from 'next/navigation';

function CompanyProfilePage({ companyId }: { companyId: string }) {
  const { companiesEnabled } = useCompaniesEnabled();

  if (!companiesEnabled) {
    notFound();
  }

  return <CompanyProfile id={companyId} />;
}

Requirements​

DependencyPurpose
SettingsProviderProvides the companiesEnabled value through React context