A Component React for Facebook Login
git clone https://github.com/keppelen/react-facebook-login.git && cd react-facebook-login
npm install react react-dom react-facebook-login --savenpm start- navigate to localhost:8080
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')
);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')
);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 {
constructor(props) {
super(props);
};
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={responseFacebook}
/>
)
}
}'use strict';
import React from 'react';
import FacebookLogin from 'react-facebook-login';
class MyComponent extends React.Component {
constructor(props) {
super(props);
};
responseFacebook = (response) => {
console.log(response);
};
render() {
return (
<FacebookLogin
appId="1088597931155576"
autoLoad={true}
fields="name,email,picture"
callback={responseFacebook}
/>
)
}
}
export default MyComponent;| 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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent