reactjs-facebook-login v0.0.2

React Facebook Login

A Component React for Facebook Login. Fork from react-facebook-login

Getting Started

npm i reactjs-facebook-login

Basic button with styling

import React from 'react';
import ReactDOM from 'react-dom';
import { FacebookLogin } from 'reactjs-facebook-login';

const responseFacebook = (response) => {
  console.log(response);
};

ReactDOM.render(
  <FacebookLogin
    appId='1088597931155576'
    autoLoad={true}
    fields='name,email,picture'
    onClick={componentClicked}
    callback={responseFacebook}
  />,
  document.getElementById('demo'),
);

The render function will be passed the following properties for you to use:

• onClick
• isDisabled
• isProcessing
• isSdkLoaded

Custom CSS Class and Icon

By default fontawesome is included, If you don't want to use default fontawesome icons, you can send an element in icon attribute

Fontawesome example:

import React from 'react';
import ReactDOM from 'react-dom';
import { FacebookLogin } from 'reactjs-facebook-login';

const responseFacebook = (response) => {
  console.log(response);
};

ReactDOM.render(
  <FacebookLogin
    appId='1088597931155576'
    autoLoad={true}
    fields='name,email,picture'
    callback={responseFacebook}
    cssClass='my-facebook-button-class'
    icon='fa-facebook'
  />,
  document.getElementById('demo'),
);

Custom element example:

import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'reactjs-facebook-login';
import TiSocialFacebookCircular from 'react-icons/lib/ti/social-facebook-circular';

const responseFacebook = (response) => {
  console.log(response);
};

ReactDOM.render(
  <FacebookLogin
    appId='1088597931155576'
    autoLoad={true}
    fields='name,email,picture'
    callback={responseFacebook}
    cssClass='my-facebook-button-class'
    icon={<TiSocialFacebookCircular />}
  />,
  document.getElementById('demo'),
);

Custom permission

By default the component, request only 'public_profile' permission, you can change if you send 'scope', that is a string comma separated attribute.

see https://developers.facebook.com/docs/facebook-login/permissions for permissions list

import React from 'react';
import FacebookLogin from 'reactjs-facebook-login';

class MyComponent extends React.Component {
  responseFacebook(response) {
    console.log(response);
  }

  render() {
    return (
      <FacebookLogin
        appId='1088597931155576'
        autoLoad={true}
        fields='name,email,picture'
        scope='public_profile,user_friends,user_actions.books'
        callback={this.responseFacebook}
      />
    );
  }
}

export default MyComponent;

Server

'use strict';

import React from 'react';
import FacebookLogin from 'reactjs-facebook-login';

class MyComponent extends React.Component {
  responseFacebook(response) {
    console.log(response);
  }

  render() {
    return (
      <FacebookLogin
        appId='1088597931155576'
        autoLoad={true}
        fields='name,email,picture'
        callback={this.responseFacebook}
      />
    );
  }
}

export default MyComponent;

Parameters