Operational State Control for Customer-facing Applications

import { RuntimeHQProvider, useRuntimeHQ } from "@theruntimehq/react";

// 1. Wrap your application root with the provider
export default function App() {
  return (
    <RuntimeHQProvider runtimeKey="rt_prod_xxxxx" intervalSeconds={60}>
      <SearchComponent />
    </RuntimeHQProvider>
  );
}

// 2. Consume dynamic state changes reactively in components
function SearchComponent() {
  const { loading, error, getCapabilityState } = useRuntimeHQ();

  if (loading || error) return null;

  const searchCapability = getCapabilityState('search');
  const isSearchDown = searchCapability?.state === "OUTAGE";
  const isSearchDegraded = searchCapability?.state === "DEGRADED";

  return (
    <div className="search-container">
      <input 
        type="text" 
        placeholder="Search products..." 
        disabled={isSearchDown}
      />
      {(isSearchDown || isSearchDegraded) && (
        <p className={`helper-message ${isSearchDown ? 'text-red-600' : 'text-amber-600'}`}>
          ⚠️ {searchCapability.message}
        </p>
      )}
    </div>
  );
}