A Component React for Facebook Login
Getting Started
git clone https://github.com/keppelen/react-facebook-login.git && cd react-facebook-login
npm install react react-dom react-facebook-login --save --force
Development
npm start
- navigate to localhost:8080
How to use
Basic
import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-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')
);
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 'react-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 'react-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 'react-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 'react-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
params | value | default value |
---|---|---|
appId | string | Required |
size | string | small - medium - metro |
scope | string | public_profile, email, user_birthday |
fields | string | name,email,picture |
callback | function | resultFacebookLogin |
autoLoad | boolean | false |
xfbml | boolean | false |
reAuthenticate | boolean | false |
textButton | string | Login with Facebook |
cssClass | string | kep-login-facebook kep-login-facebook-[button-size] |
redirectUri | string | window.location.href (mobile-only) |
version | string | 2.3 |
icon | string | element |
language | string | en_US |
onClick | function | Initial click on the component |
isMobile | boolean | detected via userAgent |
tag | string | HTML Element, Ex: 'a', 'button' |