react-facebook/dist/types/components/FacebookLogin.d.ts

Facebook components like a Login button, Like, Share, Comments, Embedded Post/Video, Messenger Chat, and Facebook Pixel tracking

import React, { ReactNode } from 'react';
import type { LoginOptions } from '../hooks/useLogin';
import type { LoginResponse } from '../utils/Facebook';
export interface FacebookLoginProps extends Omit<LoginOptions, 'scope'> {
    appId?: string;
    children?: ReactNode | ((props: {
        onClick: () => void;
        isLoading: boolean;
        isDisabled: boolean;
        isProcessing?: boolean;
    }) => React.ReactElement);
    onSuccess?: (response: LoginResponse) => void;
    onFail?: (error: Error) => void;
    onProfileSuccess?: (profile: any, response: LoginResponse) => void;
    scope?: string;
    fields?: string[];
    autoLoad?: boolean;
    disabled?: boolean;
    isMobile?: boolean;
    disableMobileRedirect?: boolean;
    className?: string;
    icon?: ReactNode;
    text?: string;
    tag?: keyof JSX.IntrinsicElements | React.ComponentType;
}
/**
 * Modern Facebook Login component with full SDK integration
 *
 * @example
 * ```tsx
 * // With Tailwind CSS
 * <FacebookLogin
 *   onSuccess={(response) => console.log('Login success:', response)}
 *   onFail={(error) => console.log('Login failed:', error)}
 *   className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
 * />
 *
 * // With profile fetching
 * <FacebookLogin
 *   fields={['name', 'email', 'picture']}
 *   onProfileSuccess={(profile, loginResponse) => {
 *     console.log('Profile:', profile);
 *     console.log('Login:', loginResponse);
 *   }}
 *   className="facebook-login-btn" // Your custom CSS class
 * />
 *
 * // Custom render using children as function (modern pattern)
 * <FacebookLogin>
 *   {({ onClick, isLoading }) => (
 *     <button
 *       onClick={onClick}
 *       disabled={isLoading}
 *       className={`btn ${isLoading ? 'loading' : ''}`}
 *     >
 *       {isLoading ? 'Loading...' : 'Continue with Facebook'}
 *     </button>
 *   )}
 * </FacebookLogin>
 *
 * ```
 */
export default function FacebookLogin(props: FacebookLoginProps): React.JSX.Element;