jabranr / use-facebook

A custom React hook to integrate Facebook JavaScript SDK in React apps

use-facebook

Custom React hook for Facebook JavaScript SDK

Installation

npm install use-facebook

Usage

Here is an example demostrating a button that triggers Facebook login dialog. Some of the code is truncated for brevity.

import React from 'react';
import useFacebook from 'use-facebook';

export default function MyFacebookLoginPage () {
  /**
   * options is an object (also detailed below)
   */
   const options = { appId: '123456789' };

  /**
   * Returns the state of SDK (true = loaded and ready to use)
   */
  const { isFacebookSDKReady } = useFacebook(options);


  /**
   * Enable/disable the button based on SDK ready state
   * Show FB login dialog on click once enabled
   */
  return (
   <button disabled={!isFacebookSDKReady} onClick={() => FB.login()}>Connect with Facebook</button>
  );
}

Read Facebook SDK docs for FB API usage.

options

options = {
  appId: 'abcxyz',
  version: "v18.0",
  autoLogAppEvents: true,
  xfbml: true,
  debug: false,
  lang: "en_GB",
}

appId is required and everything else is optional.

License

MIT License

© 2020 - present Jabran Rafique (@jabranr)