React Facebook

The Facebook SDK for React

Login, Pixel, Share, Like, Comments, Graph API — one package, fully typed, SSR-safe.

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';functionApp(){return(<FacebookProviderappId="YOUR_APP_ID"><LoginonSuccess={(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';functionApp(){return(<FacebookProviderappId="YOUR_APP_ID"pixelId="YOUR_PIXEL_ID"><TrackingExample/></FacebookProvider>);}functionTrackingExample(){const{ track, pageView, grantConsent, revokeConsent }=usePixel();return<buttononClick={()=>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';functionUserProfile(){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, {(dataas{name: string})?.name}</p>;}

Login with Hooks

import{useLogin,useProfile}from'react-facebook';functionAuthFlow(){const{ login, logout, loading }=useLogin();const{ profile }=useProfile(['name','email','picture']);if(profile){return(<div><p>Welcome, {profile.name}</p><buttononClick={()=>logout()}>Logout</button></div>);}return(<buttononClick={()=>login({scope: 'email,public_profile'})}disabled={loading}>
Continue with Facebook
</button>);}

Error Boundary

import{FacebookProvider,FacebookErrorBoundary,Login}from'react-facebook';<FacebookProviderappId="YOUR_APP_ID"><FacebookErrorBoundaryfallback={(error,reset)=>(<div><p>Facebook failed to load: {error.message}</p><buttononClick={reset}>Try again</button></div>)}><LoginonSuccess={handleSuccess}>Login with Facebook</Login></FacebookErrorBoundary></FacebookProvider>;

Dynamic Locale

import{useLocale}from'react-facebook';functionLocaleSwitcher(){const{ locale, setLocale, isChangingLocale }=useLocale();return(<selectvalue={locale}onChange={(e)=>setLocale(e.target.value)}disabled={isChangingLocale}><optionvalue="en_US">English</option><optionvalue="es_ES">Spanish</option><optionvalue="fr_FR">French</option><optionvalue="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