Getting Started

1npm install react-facebook
2# or
3yarn add react-facebook
4# or
5pnpm add react-facebook

1import { FacebookProvider } from 'react-facebook';
2
3function App() {
4  return (
5    <FacebookProvider appId="YOUR_FACEBOOK_APP_ID">
6      {/* Your app components */}
7    </FacebookProvider>
8  );
9}

1<FacebookProvider 
2  appId="YOUR_FACEBOOK_APP_ID"
3  version="v18.0"           // SDK version
4  language="en_US"          // Locale
5  debug={true}              // Enable debug mode
6  xfbml={true}              // Parse XFBML tags
7  cookie={true}             // Enable cookies
8  lazy={false}              // Load SDK immediately
9>

1import { Login } from 'react-facebook';
2
3function LoginComponent() {
4  const handleSuccess = (response) => {
5    console.log('Login Success:', response);
6    // response.authResponse contains:
7    // - accessToken
8    // - userID
9    // - expiresIn
10    // - signedRequest
11  };
12
13  const handleError = (error) => {
14    console.error('Login Failed:', error);
15  };
16
17  return (
18    <Login
19      scope="email,public_profile"
20      onSuccess={handleSuccess}
21      onError={handleError}
22      className="bg-blue-600 text-white px-4 py-2 rounded"
23    >
24      Login with Facebook
25    </Login>
26  );
27}

1import { useFacebook } from 'react-facebook';
2
3function MyComponent() {
4  const { isLoading, error, init, api } = useFacebook();
5
6  useEffect(() => {
7    if (api) {
8      // Facebook SDK is ready
9      api.getLoginStatus((response) => {
10        console.log('Login status:', response);
11      });
12    }
13  }, [api]);
14
15  if (isLoading) return <div>Loading Facebook SDK...</div>;
16  if (error) return <div>Error loading Facebook SDK</div>;
17
18  return <div>Facebook SDK loaded!</div>;
19}

1<FacebookProvider 
2  appId="YOUR_FACEBOOK_APP_ID"
3  pixel={{
4    pixelId: "YOUR_PIXEL_ID",
5    autoConfig: true,
6    debug: false,
7  }}
8>
9  {/* Your app */}
10</FacebookProvider>

1import { usePixel } from 'react-facebook';
2
3function ProductPage({ product }) {
4  const { pageView, track } = usePixel();
5
6  useEffect(() => {
7    // Track page view
8    pageView();
9    
10    // Track custom event
11    track('ViewContent', {
12      content_ids: [product.id],
13      content_type: 'product',
14      value: product.price,
15      currency: 'USD'
16    });
17  }, [product]);
18
19  return <div>{/* Product details */}</div>;
20}