React Facebook Components

[npm-image]: https://img.shields.io/npm/v/react-facebook.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-facebook
[github-url]: https://github.com/seeden/react-facebook
[support-url]: https://github.com/sponsors/seeden

Features

- Complete Facebook SDK integration - Like, Share, Comments, Videos, Login, and more
- Modern React patterns - Built with TypeScript, React Hooks, and children as function pattern
- Dynamic locale support - Change Facebook widget language on-the-fly without page reload
- Facebook Pixel integration - Built-in conversion tracking, analytics, and GDPR compliance
- Flexible styling - Works with any CSS framework (Tailwind, styled-components, etc.)
- Tree-shakeable - Import only what you need for optimal bundle size
- Async initialization - Proper lazy loading with error handling and retry logic
- ✨ v10.0.1 Updates - Unified Login component, removed deprecated features, improved locale handling

Installation

``bash
npm install react-facebook


or

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

function App() {
return (

onSuccess={(response) => console.log('Login success:', response)}
onError={(error) => console.error('Login failed:', error)}
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
>
Login with Facebook


);
}
`

Table of Contents

- Available Components
- Core Components
- Authentication
- Social Features
- Advanced Features
- Facebook Pixel
- Advanced Usage
- FAQ

Available Components

> ⚠️ v10.0.1 Breaking Changes: Removed deprecated Facebook components (CustomChat, MessageUs, MessengerCheckbox, SendToMessenger, Group, Save) and unified login components into a single Login component.

Authentication & Social:
- Login - Modern unified login component with children as function pattern
- Like - Facebook like button
- Share - Share dialog component
- ShareButton - Direct share button

Content & Media:
- EmbeddedPost - Embed Facebook posts
- EmbeddedVideo - Embed Facebook videos
- Comments - Comments plugin
- CommentsCount - Comment count display
- Page - Facebook page plugin

Core:
- FacebookProvider - SDK initialization and context
- FacebookPixelProvider - Standalone pixel provider
- Parser - Parse XFBML tags

Removed in v10.0.1 (deprecated by Facebook):
- ~~CustomChat~~ - Customer chat (discontinued May 2024)
- ~~MessageUs~~ - Message button (deprecated Sept 2024)
- ~~MessengerCheckbox~~ - Opt-in checkbox (deprecating July 2025)
- ~~SendToMessenger~~ - Send to messenger (deprecated Sept 2024)
- ~~Group~~ - Facebook group plugin (deprecated)
- ~~Save~~ - Save button (deprecated)
- ~~FacebookLogin~~ & ~~LoginButton~~ - Unified into Login component

Hooks:
- useLogin - Programmatic login control
- useProfile - Get user profile data
- useLoginStatus - Check authentication status
- useFacebook - Direct Facebook SDK access
- useLocale - Dynamic language switching
- usePixel - Facebook Pixel tracking
- usePageView - Automatic page view tracking
- useShare - Share functionality

Core Components

$3

The FacebookProvider component initializes the Facebook SDK and provides context to all child components.

`tsx
appId="YOUR_APP_ID" // Required
version="v23.0" // Optional, defaults to latest
language="en_US" // Optional, defaults to en_US
lazy={false} // Optional, load SDK on demand
debug={false} // Optional, enable debug mode
pixel={{ // Optional, Facebook Pixel configuration
pixelId: "YOUR_PIXEL_ID",
debug: false,
autoConfig: true
}}
>
{/ Your app /}

`

Authentication

$3

A modern, unified Facebook login component (replaces FacebookLogin and LoginButton):

`tsx
// Basic usage with Tailwind CSS
onSuccess={(response) => console.log('Success:', response)}
onError={(error) => console.error('Error:', error)}
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg"
>
Continue with Facebook


// With automatic profile fetching
fields={['name', 'email', 'picture']} // Specify which profile fields to fetch
onSuccess={(response) => console.log('Login:', response)}
onProfileSuccess={(profile) => {
console.log('Profile:', profile); // Receives the profile data automatically
}}
scope={['public_profile', 'email']}
className="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-3 rounded-lg"
>
Sign in with Facebook


// Children as function pattern for complete control
onSuccess={(response) => console.log('Success:', response)}
onError={(error) => console.error('Error:', error)}
scope={['public_profile', 'email']}
>
{({ onClick, isLoading, isDisabled }) => (
onClick={onClick}
disabled={isDisabled}
className={px-6 py-3 font-semibold rounded-lg transition-all ${
isLoading
? 'bg-gray-400 cursor-not-allowed'
: 'bg-blue-600 hover:bg-blue-700 text-white'
}}
>
{isLoading ? 'Connecting...' : 'Continue with Facebook'}

)}


// Using custom component (as prop)
as="a"
href="#"
className="text-blue-600 hover:underline"
onSuccess={(response) => console.log('Success:', response)}
>
Connect Facebook Account

`

$3

For programmatic login control:

`tsx
function LoginComponent() {
const { login, isLoading, error } = useLogin();

async function handleLogin() {
try {
const response = await login({
scope: 'email,user_friends',
authType: ['rerequest'],
});
console.log('Logged in:', response);
} catch (error) {
console.error('Login failed:', error);
}
}

return (

Custom Login

);
}
`

Social Features

$3

`tsx
href="https://example.com"
colorScheme="dark"
showFaces
share
/>
`

$3

`tsx
// Using the share hook
function ShareExample() {
const { share, isLoading } = useShare();

return (
share({ href: 'https://example.com' })}>
Share

);
}

// Using the share button component
href="https://example.com"
className="my-share-button"
>
Share this

`

$3

`tsx
href="https://example.com/post"
numPosts={5}
orderBy="reverse_time"
width="100%"
/>
`

$3

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

$3

`tsx
// Embedded Post
href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
width="500"
/>

// Embedded Video
href="https://www.facebook.com/facebook/videos/10153231379946729/"
width="500"
showText
/>
`

Advanced Features

$3

Change Facebook widget language dynamically:

`tsx
import { useLocale } from 'react-facebook';

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

return (
value={locale}
onChange={(e) => setLocale(e.target.value)}
disabled={isChangingLocale}
>
{availableLocales.map(loc => (
{loc}
))}

);
}
`

$3

If you were using the old components, here are the migration paths:

`tsx
// OLD: FacebookLogin or LoginButton



// NEW: Login (unified component)


// Deprecated components (removed)
// ❌ Discontinued by Facebook (May 2024)
// ❌ Deprecated by Facebook (Sept 2024)
// ❌ Deprecated by Facebook
// ❌ Deprecated by Facebook
`

Facebook Pixel

$3

Get started with Facebook Pixel tracking in just a few lines:

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

// Option 1: With FacebookProvider (includes SDK + Pixel)
appId="YOUR_APP_ID"
pixel={{ pixelId: "YOUR_PIXEL_ID" }}
>



// Option 2: Pixel only (no Facebook SDK)




// Track events anywhere in your app
function TrackingComponent() {
const { track, pageView, trackCustom } = usePixel();

return (


`tsx
appId="YOUR_APP_ID"
pixel={{
pixelId: "YOUR_PIXEL_ID",
debug: true,
autoConfig: true,
advancedMatching: {
// Add advanced matching parameters (hashed)
}
}}
>
{/ Your app /}

`

$3

Access pixel functionality with a clean API:

`tsx
import { usePixel } from 'react-facebook';

function PixelExample() {
const { track, trackCustom, grantConsent, revokeConsent } = usePixel();

const handlePurchase = () => {
track('Purchase', {
value: 29.99,
currency: 'USD',
content_name: 'Premium Plan',
content_category: 'Subscription'
});
};

const handleCustomEvent = () => {
trackCustom('UserAction', {
action_type: 'button_click',
button_name: 'custom_action'
});
};

return (


`tsx
import { usePageView } from 'react-facebook';

function MyComponent() {
// Track on mount
usePageView({ trackOnMount: true });

// Track on route changes
usePageView({ trackOnRouteChange: true });

return

`tsx
function ConsentManager() {
const { grantConsent, revokeConsent } = usePixel();

return (


`tsx
function ProfileDisplay() {
const { profile, isLoading, error } = useProfile(['id', 'name', 'email']);

if (isLoading) return

;
if (error) return

Error loading profile

;
if (!profile) return

Not logged in

;

return (

{profile.name}

{profile.email}

);
}

`tsx
function AuthStatus() {
const { status, isLoading } = useLoginStatus();

return (


`tsx
import { useFacebook } from 'react-facebook';

function FacebookAPIExample() {
const { api } = useFacebook();

async function handleCustomAction() {
if (!api) return;

// Direct Graph API call
const response = await api.api('/me/friends', 'GET');
console.log(response);

// Custom UI dialog
await api.ui({
method: 'share',
href: 'https://example.com',
});
}

return Custom Action;
}
`

Advanced Usage

$3

For advanced use cases, you can access the Facebook SDK directly:

`tsx
import { useFacebook } from 'react-facebook';

function AdvancedComponent() {
const { api } = useFacebook();

async function makeCustomCall() {
if (!api) return;

const response = await api.api('/me/friends', 'GET');
console.log(response);
}

return Custom API Call;
}
`

FAQ

$3

Important: Like and Comments plugins are affected by Facebook's privacy changes in European regions:

What's affected:
- Like Button component
- Comments Plugin component

Requirements for EU/EEA users:
- Must be logged into Facebook
- Must have consented to "App and Website Cookies" in Facebook settings

Result: If these requirements aren't met, the components will not be visible to users.

Affected regions: All EU/EEA countries and the United Kingdom.

This is a Facebook platform limitation, not a library issue. Consider alternative engagement methods for European users.

$3

This library doesn't include default styles. Use any CSS framework or styling solution:

`tsx
// Tailwind CSS


// CSS Modules


// Styled Components

`

$3

Use only one FacebookProvider instance per application. If you need Facebook Pixel separately, you can use FacebookPixelProvider:

`tsx
import { FacebookPixelProvider } from 'react-facebook';


{/ Components that need pixel access /}

`

Testing

`bash


Run component tests

Who's Using This?

Are you using react-facebook in production? We'd love to showcase your success story!

Share your testimonial →

Support

If you find this project useful, please consider [becoming a sponsor][support-url].

Contributing

Contributions are welcome! Please read our Contributing Guide.

License

MIT © Zlatko Fedor