useConfig Hook

import { useConfig } from '@grainql/analytics-web/react';

function Hero() {
  const { value } = useConfig('hero_text');
  
  return <h1>{value || 'Welcome!'}</h1>;
}

const { value, isRefreshing, error, refresh } = useConfig('hero_text');

function Component() {
  const { value, isRefreshing } = useConfig('hero_text');
  
  return (
    <div>
      <h1>{value || 'Default Text'}</h1>
      {isRefreshing && <span>Updating...</span>}
    </div>
  );
}

<GrainProvider 
  config={{
    tenantId: 'your-tenant-id',
    defaultConfigurations: {
      hero_text: 'Welcome!',
      button_color: 'blue'
    }
  }}
>
  <App />
</GrainProvider>

function Component() {
  const { value } = useConfig('hero_text');
  // Returns 'Welcome!' immediately, even offline
}

function Component() {
  const { value, refresh } = useConfig('hero_text');
  
  return (
    <div>
      <h1>{value}</h1>
      <button onClick={refresh}>Refresh</button>
    </div>
  );
}

function Component() {
  const { value, error } = useConfig('hero_text');
  
  if (error) {
    return <div>Failed to load configuration</div>;
  }
  
  return <h1>{value || 'Default'}</h1>;
}

function Component() {
  const { value } = useConfig('hero_text', {
    properties: {
      plan: 'premium',
      location: 'US'
    }
  });
  
  return <h1>{value}</h1>;
}

function Component() {
  const { value } = useConfig('hero_text', {
    forceRefresh: true
  });
  
  // Always fetches fresh from API
}

function App() {
  const { value: newUIEnabled } = useConfig('new_ui_enabled');
  
  return newUIEnabled === 'true' ? <NewUI /> : <LegacyUI />;
}

function Hero() {
  const { value: variant } = useConfig('hero_variant');
  
  const content = {
    A: { title: 'Welcome!', color: 'blue' },
    B: { title: 'Hello!', color: 'green' }
  };
  
  const { title, color } = content[variant || 'A'];
  
  return <h1 style={{ color }}>{title}</h1>;
}

function Component() {
  const { value: heroText } = useConfig('hero_text');
  const { value: buttonColor } = useConfig('button_color');
  const { value: featureEnabled } = useConfig('feature_enabled');
  
  // Or use useAllConfigs() for many configs
}

// Both components use the same config
// Only re-render when 'hero_text' changes
function ComponentA() {
  const { value } = useConfig('hero_text');
  return <div>{value}</div>;
}

function ComponentB() {
  const { value } = useConfig('hero_text');
  return <span>{value}</span>;
}