React-fb-login NPM

react-fb-login

Description

A higher order component to help you using the Facebook login plugin, using React.js.

Install

npm i react-fb-login

Props

Props	Type	Required	Default Value
appId	string	yes	-
autoLoad	boolean	no	true
fbCSS	object	no	object
scope	string	no	'public_profile'
cookie	boolean	no	false
language	string	no	navigator.language
redirect_uri	string	no	location.href
version	string	no	'v3.0'
xfbml	boolean	no	false
loginCb	function	yes	-
notLoginCb	function	no	undefined
clickCb	function	no	undefined

Example

In the Github repo there is an example where you can run the component.

/*********** FILE App.js ***********/
import React, { Component } from 'react';
import LoginButton from './LoginButton';

const Home = () => (
  <div>
      <span>Home</span>
  </div>
);

class App extends Component {
  state = {
    logged: false,
  };

  componentWillMount() {
      document.addEventListener('onFbLogin', (e) => {
         this.setState({logged: true});
      }, false);
  }

  render() {
      const {logged} = this.state;
      return !logged ? <LoginButton/> : <Home/>;
  }
}

export default App;

/*********** FILE MyLoginButton.js ***********/
import React, { Component } from 'react';
import {FBLogin} from 'react-fb-login';

const params = {
   appId: 'your_facebook_app_id',
   scope: 'public_profile',
   cookie: false,
   language: 'en_US',
   version: 'v3.0',
   xfbml: true,
}

const onFbLoginEvent = () => {
   const fbLoginEvent = new Event('onFbLogin');
   document.dispatchEvent(fbLoginEvent);
}

const loginCb = (response) => {
   console.info('Already logged: ', response);
   onFbLoginEvent();
};

const notloginCb = (response) => {
   console.error('You are not logged: ', response);
};

const settings = {
   params,
   loginCb,
   notloginCb,
};

@FBLogin(settings)
export default class LoginButton extends Component {
   render() {
       return (
           <button style={this.props.fbCSS}>
               Login
           </button>
       );
   }
}