React Facebook

Why react-facebook?

• All-in-one — Login, Pixel tracking, Share, Like, Comments, Embedded Posts/Videos, Page plugin, Graph API
• TypeScript-first — Every component, hook, and return type is fully typed
• SSR & Next.js ready — 'use client' directives and window guards built in. No window is not defined errors
• Modern React — Hooks API (useLogin, usePixel, useGraphAPI, useLocale, ...) and Context-based provider
• Small footprint — Tree-shakeable, under 15 KB gzipped
• Error resilient — FacebookErrorBoundary gracefully handles ad blockers and network failures
• GDPR compliant — Built-in consent management for Pixel tracking

Installation

npm install react-facebook

Quick Start

import { FacebookProvider, Login } from 'react-facebook';

function App() {
  return (
    <FacebookProvider appId="YOUR_APP_ID">
      <Login
        onSuccess={(response) => console.log('Login success:', response)}
        onError={(error) => console.error('Login failed:', error)}
      >
        Login with Facebook
      </Login>
    </FacebookProvider>
  );
}

Documentation

seeden.github.io/react-facebook — Full docs with examples, API reference, and guides.

• Getting Started — Installation, provider setup, first component
• Components — Login, Like, Share, Comments, Embeds, Page
• Hooks — useLogin, useGraphAPI, useShare, useLocale, and more
• Facebook Pixel — Tracking, page views, custom events, GDPR consent
• Guides — Facebook Login setup, Pixel setup, version upgrades

What's Included

Components

| Component | Description | | -------------------------------- | --------------------------------------------------------- | | FacebookProvider | SDK initialization and context provider | | Login | Facebook Login with render props and children as function | | Like | Like button with layout, color scheme, and share options | | Share / ShareButton | Share dialog and inline share button | | Comments / CommentsCount | Comments plugin and count display | | EmbeddedPost / EmbeddedVideo | Embed Facebook posts and videos | | Page | Facebook Page plugin with tabs | | FacebookPixelProvider | Standalone Pixel provider (no SDK required) | | FacebookErrorBoundary | Catches SDK failures with customizable fallback |

Hooks

| Hook | Description | | ---------------------------------- | ---------------------------------------------------- | | useLogin | Programmatic login and logout | | useProfile | Fetch user profile fields | | useLoginStatus | Check authentication status | | useGraphAPI | Typed Graph API calls with loading/error/data states | | useShare / useFeed / useSend | Share, Feed, and Send dialogs | | usePixel / usePageView | Pixel event tracking and automatic page views | | useLocale | Dynamic language switching without page reload | | useFacebook | Direct access to the Facebook SDK instance |

Examples

Facebook Pixel

import { FacebookProvider, usePixel } from 'react-facebook';

function App() {
  return (
    <FacebookProvider appId="YOUR_APP_ID" pixelId="YOUR_PIXEL_ID">
      <TrackingExample />
    </FacebookProvider>
  );
}

function TrackingExample() {
  const { track, pageView, grantConsent, revokeConsent } = usePixel();

  return <button onClick={() => track('Purchase', { value: 29.99, currency: 'USD' })}>Buy Now</button>;
}

Or use the drop-in imperative API (no provider needed):

import { ReactPixel } from 'react-facebook';

ReactPixel.init('YOUR_PIXEL_ID');
ReactPixel.pageView();
ReactPixel.track('Purchase', { value: 29.99, currency: 'USD' });

Graph API

import { useGraphAPI } from 'react-facebook';

function UserProfile() {
  const { data, loading, error } = useGraphAPI({
    path: '/me',
    params: { fields: 'name,email,picture' },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <p>Welcome, {(data as { name: string })?.name}</p>;
}

Login with Hooks

import { useLogin, useProfile } from 'react-facebook';

function AuthFlow() {
  const { login, logout, loading } = useLogin();
  const { profile } = useProfile(['name', 'email', 'picture']);

  if (profile) {
    return (
      <div>
        <p>Welcome, {profile.name}</p>
        <button onClick={() => logout()}>Logout</button>
      </div>
    );
  }

  return (
    <button onClick={() => login({ scope: 'email,public_profile' })} disabled={loading}>
      Continue with Facebook
    </button>
  );
}

Error Boundary

import { FacebookProvider, FacebookErrorBoundary, Login } from 'react-facebook';

<FacebookProvider appId="YOUR_APP_ID">
  <FacebookErrorBoundary
    fallback={(error, reset) => (
      <div>
        <p>Facebook failed to load: {error.message}</p>
        <button onClick={reset}>Try again</button>
      </div>
    )}
  >
    <Login onSuccess={handleSuccess}>Login with Facebook</Login>
  </FacebookErrorBoundary>
</FacebookProvider>;

Dynamic Locale

import { useLocale } from 'react-facebook';

function LocaleSwitcher() {
  const { locale, setLocale, isChangingLocale } = useLocale();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)} disabled={isChangingLocale}>
      <option value="en_US">English</option>
      <option value="es_ES">Spanish</option>
      <option value="fr_FR">French</option>
      <option value="de_DE">German</option>
    </select>
  );
}

Support

If you find this project useful, please consider becoming a sponsor.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

MIT