react-facebook/dist/index.d.ts

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

import * as React from 'react';
import React__default, { ReactNode, ElementType, CSSProperties, ComponentType, ReactElement } from 'react';

declare enum LoginStatus {
    CONNECTED = "connected",
    AUTHORIZATION_EXPIRED = "authorization_expired",
    NOT_AUTHORIZED = "not_authorized",
    UNKNOWN = "unknown"
}

type AuthResponse = {
    userID: string;
    accessToken: string;
};
type LoginResponse = {
    status: LoginStatus.CONNECTED;
    authResponse: AuthResponse;
} | {
    status: Exclude<LoginStatus, LoginStatus.CONNECTED>;
};
type LoginOptions$1 = {
    scope?: string;
    returnScopes?: boolean;
    authType?: string[];
    rerequest?: boolean;
    reauthorize?: boolean;
};
declare global {
    interface Window {
        fbAsyncInit: () => void;
        FB: any;
    }
}
declare enum Method {
    GET = "get",
    POST = "post",
    DELETE = "delete"
}
declare enum Namespace {
    UI = "ui",
    API = "api",
    LOGIN = "login",
    LOGOUT = "logout",
    GET_LOGIN_STATUS = "getLoginStatus",
    GET_AUTH_RESPONSE = "getAuthResponse"
}
type FacebookOptions = {
    domain?: string;
    version?: string;
    cookie?: boolean;
    status?: boolean;
    xfbml?: boolean;
    language?: string;
    frictionlessRequests?: boolean;
    debug?: boolean;
    chatSupport?: boolean;
    appId: string;
    autoLogAppEvents?: boolean;
    lazy?: boolean;
};
declare class Facebook {
    options: FacebookOptions;
    loadingPromise: Promise<any> | undefined;
    constructor(options: FacebookOptions);
    getAppId(): string;
    getFB(): any;
    init(): Promise<Facebook>;
    process<Response>(namespace: Namespace, before?: any[], after?: any[]): Promise<Response>;
    ui(options: any): Promise<unknown>;
    api<T>(path: string, method?: Method, params?: {}): Promise<T>;
    login(options: LoginOptions$1): Promise<LoginResponse>;
    logout(): Promise<unknown>;
    getLoginStatus(): Promise<LoginResponse>;
    getAuthResponse(): Promise<unknown>;
    getTokenDetail(loginResponse?: LoginResponse): Promise<AuthResponse>;
    getProfile(params: any): Promise<unknown>;
    getTokenDetailWithProfile(params: any, response: any): Promise<{
        profile: unknown;
        tokenDetail: AuthResponse;
    }>;
    getToken(): Promise<string>;
    getUserId(): Promise<string>;
    sendInvite(to: string, options: any): Promise<unknown>;
    postAction(ogNamespace: string, ogAction: string, ogObject: string, ogObjectUrl: string, noFeedStory?: boolean): Promise<unknown>;
    getPermissions(): Promise<{
        permission: string;
        status: "granted";
    }[]>;
    hasPermissions(permissions: string[]): Promise<boolean>;
    subscribe<T>(eventName: string, callback: (value: T) => void): Promise<() => Promise<void>>;
    unsubscribe<T>(eventName: string, callback: (value: T) => void): Promise<void>;
    parse(parentNode: HTMLElement): Promise<void>;
    getRequests(): Promise<unknown>;
    removeRequest(requestId: string): Promise<unknown>;
    setAutoGrow(): Promise<void>;
    paySimple(product: string, quantity?: number): Promise<unknown>;
    pay(product: string, options: any): Promise<unknown>;
    getLocale(): string;
    changeLocale(newLocale: string): Promise<void>;
    parseAll(): Promise<void>;
}

type FacebookProviderProps = FacebookOptions & {
    children: ReactNode;
    /** Facebook Pixel configuration */
    pixel?: {
        pixelId: string;
        autoConfig?: boolean;
        debug?: boolean;
        advancedMatching?: Record<string, any>;
    };
};
declare function FacebookProvider(props: FacebookProviderProps): React__default.JSX.Element;

type ParserProps = {
    className: string;
    as?: ElementType;
    children?: ReactNode;
    style?: CSSProperties;
    data?: Record<string, string | undefined>;
};
declare const _default$9: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ParserProps & React__default.RefAttributes<HTMLElement>>>;

type LikeProps = Partial<ParserProps> & {
    referral?: string;
    href?: string;
    layout?: 'standard' | 'button_count' | 'button' | 'box_count';
    showFaces?: boolean;
    colorScheme?: string;
    action?: string;
    share?: boolean;
    width?: number | string;
    size?: string;
    kidDirectedSite?: boolean;
    lazy?: boolean;
};
declare const _default$8: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Partial<ParserProps> & {
    referral?: string;
    href?: string;
    layout?: "standard" | "button_count" | "button" | "box_count";
    showFaces?: boolean;
    colorScheme?: string;
    action?: string;
    share?: boolean;
    width?: number | string;
    size?: string;
    kidDirectedSite?: boolean;
    lazy?: boolean;
} & React__default.RefAttributes<HTMLElement>>>;

type ShareOptions = {
    href: string;
    display: 'iframe' | 'popup' | 'async' | 'page';
    hashtag?: string;
    redirectUri?: string;
};
declare function useShare(): {
    isLoading: boolean;
    error: Error | undefined;
    share: (options: ShareOptions) => Promise<unknown>;
};

type LoginButton = ShareOptions & {
    children?: ReactNode;
    as?: ComponentType | ElementType;
    disabled?: boolean;
    className?: string;
    style?: CSSProperties;
};
declare function ShareButton(props: LoginButton): React__default.JSX.Element;

type PageProps = Partial<ParserProps> & {
    href?: string;
    tabs?: string;
    hideCover?: boolean;
    height?: number | string;
    width?: number | string;
    showFacepile?: boolean;
    hideCTA?: boolean;
    smallHeader?: boolean;
    adaptContainerWidth?: boolean;
    lazy?: boolean;
};
declare const _default$7: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Partial<ParserProps> & {
    href?: string;
    tabs?: string;
    hideCover?: boolean;
    height?: number | string;
    width?: number | string;
    showFacepile?: boolean;
    hideCTA?: boolean;
    smallHeader?: boolean;
    adaptContainerWidth?: boolean;
    lazy?: boolean;
} & React__default.RefAttributes<HTMLElement>>>;

type LoginOptions = {
    scope?: string;
    returnScopes?: boolean;
    authType?: string[];
    rerequest?: boolean;
    reauthorize?: boolean;
};
declare function useLogin(): {
    login: (loginOptions: LoginOptions, callback?: (response: LoginResponse) => void) => Promise<{
        status: LoginStatus.CONNECTED;
        authResponse: AuthResponse;
    }>;
    error: Error | undefined;
    isLoading: boolean;
    status: LoginStatus | undefined;
};

type LoginRenderProps = {
    onClick: () => void;
    isLoading: boolean;
    isDisabled: boolean;
};
type LoginProps = Omit<LoginOptions, 'scope'> & {
    children?: ReactNode | ((props: LoginRenderProps) => ReactElement);
    onSuccess?: (response: LoginResponse) => void;
    onError?: (error: Error) => void;
    onProfileSuccess?: (profile: any) => void;
    scope?: string | string[];
    fields?: string[];
    as?: ElementType | ComponentType<any>;
    disabled?: boolean;
    [key: string]: any;
};
declare function Login(props: LoginProps): React__default.JSX.Element;

type EmbeddedPostProps = Partial<ParserProps> & {
    href: string;
    width?: string | number;
    showText?: boolean;
    lazy?: boolean;
};
declare const _default$6: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Partial<ParserProps> & {
    href: string;
    width?: string | number;
    showText?: boolean;
    lazy?: boolean;
} & React__default.RefAttributes<HTMLElement>>>;

type EmbeddedVideoProps = Partial<ParserProps> & {
    href: string;
    width?: number | string;
    showText?: boolean;
    allowFullScreen?: boolean;
    autoPlay?: boolean;
    showCaptions?: boolean;
    lazy?: boolean;
};
declare const _default$5: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Partial<ParserProps> & {
    href: string;
    width?: number | string;
    showText?: boolean;
    allowFullScreen?: boolean;
    autoPlay?: boolean;
    showCaptions?: boolean;
    lazy?: boolean;
} & React__default.RefAttributes<HTMLElement>>>;

type CommentsProps = Partial<ParserProps> & {
    href?: string;
    numPosts?: number;
    orderBy?: 'reverse_time' | 'time';
    width?: number | string;
    colorScheme?: 'light' | 'dark';
    mobile?: boolean;
    lazy?: boolean;
};
declare const _default$4: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Partial<ParserProps> & {
    href?: string;
    numPosts?: number;
    orderBy?: "reverse_time" | "time";
    width?: number | string;
    colorScheme?: "light" | "dark";
    mobile?: boolean;
    lazy?: boolean;
} & React__default.RefAttributes<HTMLElement>>>;

type CommentsCountProps = Partial<ParserProps> & {
    href?: string;
};
declare const _default$3: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Partial<ParserProps> & {
    href?: string;
} & React__default.RefAttributes<HTMLElement>>>;

type ShareProps = Partial<ParserProps> & {
    href?: string;
    lazy?: boolean;
    size?: 'small' | 'large';
    layout?: 'box_count' | 'button_count' | 'button' | 'icon_link';
};
declare const _default$2: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Partial<ParserProps> & {
    href?: string;
    lazy?: boolean;
    size?: "small" | "large";
    layout?: "box_count" | "button_count" | "button" | "icon_link";
} & React__default.RefAttributes<HTMLElement>>>;

type FacebookContextInterface = {
    isLoading: boolean;
    error: Error | undefined;
    init: () => Promise<Facebook | undefined>;
    api: Facebook | undefined;
    parse: (element: HTMLDivElement | HTMLSpanElement) => Promise<void>;
    locale: string;
    setLocale: (locale: string) => Promise<void>;
};
declare const _default$1: React.Context<FacebookContextInterface | undefined>;

type PixelOptions = {
    pixelId: string;
    autoConfig?: boolean;
    debug?: boolean;
    advancedMatching?: Record<string, any>;
};
type PixelEventData = Record<string, any>;
type PixelEventName = 'PageView' | 'ViewContent' | 'Search' | 'AddToCart' | 'AddToWishlist' | 'InitiateCheckout' | 'AddPaymentInfo' | 'Purchase' | 'Lead' | 'CompleteRegistration' | 'Contact' | 'CustomizeProduct' | 'Donate' | 'FindLocation' | 'Schedule' | 'StartTrial' | 'SubmitApplication' | 'Subscribe' | 'Custom';
declare global {
    interface Window {
        fbq: any;
        _fbq: any;
    }
}
declare class FacebookPixel {
    private options;
    private loadingPromise;
    constructor(options: PixelOptions);
    private warn;
    private log;
    private loadPixelScript;
    init(): Promise<FacebookPixel>;
    pageView(): Promise<void>;
    track(eventName: PixelEventName, data?: PixelEventData): Promise<void>;
    trackSingle(pixelId: string, eventName: PixelEventName, data?: PixelEventData): Promise<void>;
    trackCustom(eventName: string, data?: PixelEventData): Promise<void>;
    trackSingleCustom(pixelId: string, eventName: string, data?: PixelEventData): Promise<void>;
    grantConsent(): Promise<void>;
    revokeConsent(): Promise<void>;
    fbq(...args: any[]): Promise<void>;
    isInitialized(): boolean;
    getOptions(): PixelOptions;
}

type FacebookPixelContextInterface = {
    isLoading: boolean;
    error: Error | undefined;
    init: () => Promise<void>;
    pixel: FacebookPixel | undefined;
    pageView: () => Promise<void>;
    track: (eventName: string, data?: Record<string, any>) => Promise<void>;
    trackCustom: (eventName: string, data?: Record<string, any>) => Promise<void>;
    grantConsent: () => Promise<void>;
    revokeConsent: () => Promise<void>;
    fbq: (...args: any[]) => Promise<void>;
};
declare const FacebookPixelContext: React__default.Context<FacebookPixelContextInterface | undefined>;
type FacebookPixelProviderProps = PixelOptions & {
    children: ReactNode;
    lazy?: boolean;
};
declare function FacebookPixelProvider(props: FacebookPixelProviderProps): React__default.JSX.Element;

declare enum LikeSize {
    SMALL = "small",
    LARGE = "large"
}

declare enum LikeLayout {
    STANDARD = "standard",
    BUTTON_COUNT = "button_count",
    BUTTON = "button",
    BOX_COUNT = "box_count"
}

declare enum ColorScheme {
    LIGHT = "light",
    DARK = "dark"
}

declare enum LikeAction {
    LIKE = "like",
    RECOMMEND = "recommend"
}

declare enum CommentsOrderBy {
    SOCIAL = "social",
    REVERSE_TIME = "reverse_time",
    TIME = "time"
}

declare enum MessengerSize {
    SMALL = "small",
    MEDIUM = "medium",
    STANDARD = "standard",
    LARGE = "large",
    XLARGE = "xlarge"
}

declare enum MessengerColor {
    BLUE = "blue",
    WHITE = "white"
}

declare const _default: string[];

type UseFacebookProps = {
    lazy?: boolean;
};
declare function useFacebook(props?: UseFacebookProps): FacebookContextInterface;

declare function useLoginStatus(): {
    isLoading: boolean;
    error?: Error;
    status?: LoginStatus;
};

type FacebookLocale = 'en_US' | 'es_ES' | 'es_LA' | 'fr_FR' | 'de_DE' | 'it_IT' | 'pt_BR' | 'pt_PT' | 'ja_JP' | 'ko_KR' | 'zh_CN' | 'zh_TW' | 'ar_AR' | 'hi_IN' | 'th_TH' | 'vi_VN' | 'ru_RU' | 'tr_TR' | 'pl_PL' | 'nl_NL' | 'sv_SE' | 'da_DK' | 'no_NO' | 'fi_FI' | 'cs_CZ' | 'hu_HU' | 'ro_RO' | 'bg_BG' | 'hr_HR' | 'sk_SK' | 'sl_SI' | 'et_EE' | 'lv_LV' | 'lt_LT' | 'uk_UA' | 'he_IL' | 'af_ZA' | 'ms_MY' | 'id_ID' | 'tl_PH' | 'cy_GB' | 'eu_ES' | 'ca_ES' | 'gl_ES';
/**
 * Hook for managing Facebook SDK locale dynamically
 *
 * @returns Object with current locale, setLocale function, and loading state
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const { locale, setLocale, isChangingLocale } = useLocale();
 *
 *   return (
 *     <div>
 *       <p>Current locale: {locale}</p>
 *       <button
 *         onClick={() => setLocale('es_ES')}
 *         disabled={isChangingLocale}
 *       >
 *         Switch to Spanish
 *       </button>
 *       {isChangingLocale && <p>Changing locale...</p>}
 *     </div>
 *   );
 * }
 * ```
 */
declare function useLocale(): {
    locale: FacebookLocale;
    setLocale: (newLocale: FacebookLocale) => Promise<void>;
    isChangingLocale: boolean;
    availableLocales: FacebookLocale[];
};

declare function useProfile(fields: string[]): {
    isLoading: boolean;
    error: Error | undefined;
    profile: Record<string, any> | undefined;
};

declare function useSubscribe<T>(event: string, callback?: (data: any) => void): T | undefined;

type UsePixelProps = {
    lazy?: boolean;
};
declare function usePixel(props?: UsePixelProps): FacebookPixelContextInterface;

type UsePageViewProps = {
    trackOnMount?: boolean;
    trackOnRouteChange?: boolean;
};
declare function usePageView(props?: UsePageViewProps): {
    pageView: () => Promise<void>;
    isLoading: boolean;
};

export { ColorScheme, _default$4 as Comments, _default$3 as CommentsCount, CommentsOrderBy, _default$6 as EmbeddedPost, _default$5 as EmbeddedVideo, _default$1 as FacebookContext, FacebookPixelContext, FacebookPixelProvider, FacebookProvider, _default as Fields, _default$8 as Like, LikeAction, LikeLayout, LikeSize, Login, LoginStatus, MessengerColor, MessengerSize, _default$7 as Page, _default$9 as Parser, _default$2 as Share, ShareButton, useFacebook, useLocale, useLogin, useLoginStatus, usePageView, usePixel, useProfile, useShare, useSubscribe };
export type { CommentsCountProps, CommentsProps, EmbeddedPostProps, EmbeddedVideoProps, FacebookContextInterface, FacebookPixelContextInterface, FacebookPixelProviderProps, FacebookProviderProps, LikeProps, LoginButton, LoginProps, PageProps, ParserProps, ShareProps };