Login, Pixel, Share, Like, Comments, Graph API — one package, fully typed, SSR-safe.
- 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 andwindowguards built in. Nowindow is not definederrors - Modern React — Hooks API (
useLogin,usePixel,useGraphAPI,useLocale, ...) and Context-based provider - Small footprint — Tree-shakeable, under 15 KB gzipped
- Error resilient —
FacebookErrorBoundarygracefully handles ad blockers and network failures - GDPR compliant — Built-in consent management for Pixel tracking
npm install react-facebookimport { 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> ); }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
| 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 |
| 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 |
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' });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>; }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> ); }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>;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> ); }If you find this project useful, please consider becoming a sponsor.
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
MIT