React Facebook Login

React Component for Facebook Login. aims to improve react-facebook-login. 한글 가이드

• 💙 Typescript support
• 📦 6kb mini library
• 👫 All browsers supported
• 🏃 Currently maintaining

Table of contents

• Getting Started
• Usage
  • Component
  • FacebookLoginClient
• Examples
• Props
• Stay in touch
• License
• Links

Getting Started

npm i --save @greatsumini/react-facebook-login
# or
yarn add @greatsumini/react-facebook-login

Usage

Component

import FacebookLogin from '@greatsumini/react-facebook-login';

// default
<FacebookLogin
  appId="1088597931155576"
  onSuccess={(response) => {
    console.log('Login Success!', response);
  }}
  onFail={(error) => {
    console.log('Login Failed!', error);
  }}
  onProfileSuccess={(response) => {
    console.log('Get Profile Success!', response);
  }}
/>

// custom style
<FacebookLogin
  appId="1088597931155576"
  style={{
    backgroundColor: '#4267b2',
    color: '#fff',
    fontSize: '16px',
    padding: '12px 24px',
    border: 'none',
    borderRadius: '4px',
  }}
/>

// custom render function
<FacebookLogin
  appId="1088597931155576"
  onSuccess={(response) => {
    console.log('Login Success!', response);
  }}
  onFail={(error) => {
    console.log('Login Failed!', error);
  }}
  onProfileSuccess={(response) => {
    console.log('Get Profile Success!', response);
  }}
  render={({ onClick, logout }) => (
    <CustomComponent onClick={onClick} onLogoutClick={logout} />
  )}
/>

// custom params, options
<FacebookLogin
  appId="1088597931155576"
  useRedirect
  initParams={{
    version: 'v10.0',
    xfbml: true,
  }}
  dialogParams={{
    response_type: 'token',
  }}
  loginOptions={{
    return_scopes: true,
  }}
/>

FacebookLoginClient

You can manually call facebook sdk related functions with FacebookLoginClient

import { FacebookLoginClient } from '@greatsumini/react-facebook-login';

FacebookLoginClient.getLoginStatus((res) => {
  console.log(res.status);
});

FacebookLoginClient.login((res) => {
  console.log(res);
});

FacebookLoginClient.getProfile((res) => {
  console.log(res.id, res.name, res.email);
});

FacebookLoginClient.logout(() => {
  console.log('logout completed!');
});

Examples

You can checkout examples here

Props

Check all available params,options here

| Property | Description | Type | Default | | ---------------- | ------------------------------------------------ | --------------------------- | ------------------------------------------------------------------------------------------------------------- | | appId * | Your application ID. | string | - | | language | API version | string | 'en_US' | | scope | Comma seperated list of permissions for login. | string | 'public_profile, email' | | fields | fields return by /me (profile) | string | 'name,email,picture' | | onSuccess | | function | - | | onFail | | function | - | | onProfileSuccess | | function | - | | style | css properties for login button | CSSProperties | - | | children | Children Component | ReactNode | ReactNodeArray | "Login with Facebook" | | render | Callback which render custom component | function | - | | autoLoad | if true, request login on mount | boolean | false | | useRedirect | if true, use redirect instead of window.FB.login | boolean | false (forced to be true in fb browers (ref)) | | useCustomChat | if true, append 'xfbml.customerchat' to sdk url | boolean | false | | initParams | params for FB.init | InitParams | docs | | dialogParams | params for login dialog | DialogParams | docs | | loginOptions | options for FB.login | LoginOptions | docs |

Stay in touch

• Author - Sumin Choi

License

React Facebook Login is MIT licensed.

Links

• NPM
• GitHub
• (Official) Facebook Login Guide