React Facebook

The complete Facebook SDK for React — one package for everything.

Why react-facebook?

Facebook integration in React has been fragmented across abandoned, single-purpose packages with no TypeScript, no SSR support, and no maintenance. react-facebook is a unified, actively maintained solution that covers the entire Facebook platform.

Feature	react-facebook
Login & Logout	<Login>, useLogin
Pixel Tracking	usePixel, usePageView, ReactPixel
Graph API	useGraphAPI with typed responses
Social Plugins	Like, Share, Comments, Page, Embeds
TypeScript	Full type coverage, no @types/ needed
SSR / Next.js	'use client' directives, window guards
Error Handling	FacebookErrorBoundary for ad blockers
GDPR Consent	Built-in grantConsent / revokeConsent
Bundle Size	Tree-shakeable, under 15 KB gzipped
i18n	Dynamic locale switching with useLocale

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>
  );
}

TypeScript First

Every hook and component is fully typed. Import the types you need:

import type { LoginResponse, AuthResponse, UseGraphAPIReturn } from 'react-facebook';
import { useGraphAPI } from 'react-facebook';

interface Photo {
  id: string;
  source: string;
  name: string;
}

function PhotoGallery() {
  const { data, loading, error } = useGraphAPI<{ data: Photo[] }>({
    path: '/me/photos',
    params: { fields: 'id,source,name', limit: 10 },
    autoFetch: true,
  });

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

  return (
    <div className="grid grid-cols-3 gap-4">
      {data?.data.map((photo) => (
        <img key={photo.id} src={photo.source} alt={photo.name} />
      ))}
    </div>
  );
}

Explore