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)} className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700" > Login with Facebook </Login> </FacebookProvider> ); }

<FacebookProvider 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 */} </FacebookProvider>

// Basic usage with Tailwind CSS <Login 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 </Login> // With automatic profile fetching <Login 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 </Login> // Children as function pattern for complete control <Login onSuccess={(response) => console.log('Success:', response)} onError={(error) => console.error('Error:', error)} scope={['public_profile', 'email']} > {({ onClick, isLoading, isDisabled }) => ( <button 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'} </button> )} </Login> // Using custom component (as prop) <Login as="a" href="#" className="text-blue-600 hover:underline" onSuccess={(response) => console.log('Success:', response)} > Connect Facebook Account </Login>

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 ( <button onClick={handleLogin} disabled={isLoading}> Custom Login </button> ); }

<Like href="https://example.com" colorScheme="dark" showFaces share />

// Using the share hook function ShareExample() { const { share, isLoading } = useShare(); return ( <button onClick={() => share({ href: 'https://example.com' })}> Share </button> ); } // Using the share button component <ShareButton href="https://example.com" className="my-share-button" > Share this </ShareButton>

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

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

// Embedded Post <EmbeddedPost href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" width="500" /> // Embedded Video <EmbeddedVideo href="https://www.facebook.com/facebook/videos/10153231379946729/" width="500" showText />

import { useLocale } from 'react-facebook'; function LocaleSwitcher() { const { locale, setLocale, isChangingLocale, availableLocales } = useLocale(); return ( <select value={locale} onChange={(e) => setLocale(e.target.value)} disabled={isChangingLocale} > {availableLocales.map(loc => ( <option key={loc} value={loc}>{loc}</option> ))} </select> ); }

// OLD: FacebookLogin or LoginButton <FacebookLogin onSuccess={...} onFail={...} /> <LoginButton onSuccess={...} onError={...} /> // NEW: Login (unified component) <Login onSuccess={...} onError={...} /> // Deprecated components (removed) <CustomChat /> // ❌ Discontinued by Facebook (May 2024) <MessageUs /> // ❌ Deprecated by Facebook (Sept 2024) <Save /> // ❌ Deprecated by Facebook <Group /> // ❌ Deprecated by Facebook

import { FacebookProvider, usePixel } from 'react-facebook'; // Option 1: With FacebookProvider (includes SDK + Pixel) <FacebookProvider appId="YOUR_APP_ID" pixel={{ pixelId: "YOUR_PIXEL_ID" }} > <App /> </FacebookProvider> // Option 2: Pixel only (no Facebook SDK) <FacebookPixelProvider pixelId="YOUR_PIXEL_ID"> <App /> </FacebookPixelProvider> // Track events anywhere in your app function TrackingComponent() { const { track, pageView, trackCustom } = usePixel(); return ( <div> <button onClick={() => track('Purchase', { value: 29.99, currency: 'USD' })}> Track Purchase </button> <button onClick={() => pageView()}> Track Page View </button> <button onClick={() => trackCustom('ButtonClick', { button: 'hero-cta' })}> Track Custom Event </button> </div> ); }

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

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 ( <div> <button onClick={handlePurchase}>Track Purchase</button> <button onClick={handleCustomEvent}>Track Custom Event</button> </div> ); }

import { usePageView } from 'react-facebook'; function MyComponent() { // Track on mount usePageView({ trackOnMount: true }); // Track on route changes usePageView({ trackOnRouteChange: true }); return <div>My Component</div>; }

function ConsentManager() { const { grantConsent, revokeConsent } = usePixel(); return ( <div> <button onClick={grantConsent}>Accept Tracking</button> <button onClick={revokeConsent}>Decline Tracking</button> </div> ); }

function ProfileDisplay() { const { profile, isLoading, error } = useProfile(['id', 'name', 'email']); if (isLoading) return <div>Loading profile...</div>; if (error) return <div>Error loading profile</div>; if (!profile) return <div>Not logged in</div>; return ( <div> <img src={profile.picture.data.url} alt={profile.name} /> <h2>{profile.name}</h2> <p>{profile.email}</p> </div> ); }

function AuthStatus() { const { status, isLoading } = useLoginStatus(); return ( <div> Status: {isLoading ? 'Checking...' : status} </div> ); }

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 <button onClick={handleCustomAction}>Custom Action</button>; }

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 <button onClick={makeCustomCall}>Custom API Call</button>; }

// Tailwind CSS <Login className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700" /> // CSS Modules  <Login className={styles.facebookButton} /> // Styled Components <Login className={styledButton} />

import { FacebookPixelProvider } from 'react-facebook'; <FacebookPixelProvider pixelId="YOUR_PIXEL_ID" debug={true}> {/* Components that need pixel access */} </FacebookPixelProvider>