API Reference

<FacebookProvider 
  appId="123456789"
  version="v18.0"
  language="en_US"
  pixel={{ pixelId: "987654321" }}
>
  {children}
</FacebookProvider>

// Basic usage with Tailwind
<Login
  scope={['email', 'public_profile']}
  onSuccess={(response) => console.log('Success:', response)}
  onError={(error) => console.error('Error:', error)}
  className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
>
  Continue with Facebook
</Login>

// Children as function pattern
<Login
  scope={['public_profile', 'email']}
  fields={['name', 'email', 'picture']}
  onSuccess={handleSuccess}
  onProfileSuccess={(profile) => console.log('Profile:', profile)}
>
  {({ onClick, isLoading, isDisabled }) => (
    <button
      onClick={onClick}
      disabled={isDisabled}
      className={`btn ${isLoading ? 'loading' : ''}`}
    >
      {isLoading ? 'Connecting...' : 'Login with Facebook'}
    </button>
  )}
</Login>

// Custom element
<Login 
  as="a" 
  href="#" 
  className="text-blue-600 hover:underline"
>
  Connect Facebook Account
</Login>

<Share href="https://example.com">
  {({ handleClick }) => (
    <button onClick={handleClick}>Share</button>
  )}
</Share>

<Like 
  href="https://example.com"
  layout="button_count"
  size="large"
  showFaces={true}
  share={true}
/>

<Comments 
  href="https://example.com/article"
  numPosts={20}
  orderBy="social"
/>

<Page 
  href="https://www.facebook.com/YourPage"
  tabs="timeline,events,messages"
  width={500}
  height={600}
/>

<EmbeddedPost 
  href="https://www.facebook.com/user/posts/123456789"
  width={500}
  showText={true}
/>

<EmbeddedVideo 
  href="https://www.facebook.com/facebook/videos/123456789"
  width={500}
  showText={true}
/>

<CommentsCount href="https://example.com/article" />

<ShareButton href="https://example.com">
  Share this content
</ShareButton>

<FacebookPixelProvider
  pixelId="123456789"
  autoConfig={true}
  debug={true}
  advancedMatching={{
    em: 'user@example.com', // hashed email
    ph: '+1234567890'       // hashed phone
  }}
>
  {children}
</FacebookPixelProvider>

const { isLoading, error, api } = useFacebook();

useEffect(() => {
  if (api) {
    api.getLoginStatus((response) => {
      console.log(response);
    });
  }
}, [api]);

const { login, logout, isLoading } = useLogin();

const handleLogin = async () => {
  const response = await login({ 
    scope: 'email,public_profile' 
  });
  console.log(response);
};

const { profile, loading, fetchProfile } = useProfile();

if (profile) {
  console.log(profile.name, profile.email);
}

const { track, trackCustom, pageView, grantConsent } = usePixel();

// Track standard Facebook events
track('Purchase', {
  value: 25.00,
  currency: 'USD',
  contents: [{ id: 'product-123', quantity: 1 }]
});

track('ViewContent', {
  content_ids: ['product-123'],
  content_type: 'product',
  value: 25.00,
  currency: 'USD'
});

// Track custom events
trackCustom('NewsletterSignup', {
  email_domain: 'gmail.com'
});

// GDPR compliance
grantConsent();

// Manual page view tracking
pageView();

// Auto-track on mount
usePageView();

// Custom configuration
usePageView({
  trackOnMount: true,
  trackOnRouteChange: true,
  data: { custom_param: 'value' }
});

// Manual tracking only
const { pageView } = usePageView({ trackOnMount: false });
pageView(); // Trigger manually

const { locale, setLocale } = useLocale();

await setLocale('es_ES');

const { share } = useShare();

await share({
  href: 'https://example.com',
  hashtag: '#react'
});