The Facebook SDK for React

import { useLogin } from 'react-facebook';

function LoginButton() {
  const { login, loading, error } = useLogin();

  async function handleLogin() {
    const res = await login({
      scope: 'public_profile,email',
    });
    console.log(res);
  }

  return (
    <button onClick={handleLogin} disabled={loading}>
      {loading ? 'Logging in...' : 'Login with Facebook'}
    </button>
  );
}

import { usePixel } from 'react-facebook';

function Checkout() {
  const { track, grantConsent } = usePixel();

  return (
    <>
      <button onClick={() => grantConsent()}>
        Accept Cookies
      </button>
      <button onClick={() => track('Purchase', {
        value: 49.99, currency: 'USD',
      })}>
        Complete Order
      </button>
    </>
  );
}

import { useShare } from 'react-facebook';

function ShareButton() {
  const { share } = useShare();

  async function handleShare() {
    await share({
      href: 'https://your-site.com',
      hashtag: '#reactfacebook',
    });
  }

  return (
    <button onClick={handleShare}>
      Share this page
    </button>
  );
}

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.message}</p>;

  return <p>Welcome, {data?.name}</p>;
}