React Facebook login component forked from https://www.npmjs.com/package/react-facebook-login
npm install react-facebook-login-with-childrenshell
git clone https://github.com/keppelen/react-facebook-login.git && cd react-facebook-login
npm install react react-dom react-facebook-login --save
`
Development
`shell
npm start
`
- navigate to localhost:8080
How to use
$3
`js
import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login';
const responseFacebook = (response) => {
console.log(response);
}
ReactDOM.render(
autoLoad={true}
fields="name,email,picture"
onClick={componentClicked}
callback={responseFacebook} />,
document.getElementById('demo')
);
`
$3
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:
`js
import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login';
const responseFacebook = (response) => {
console.log(response);
}
ReactDOM.render(
autoLoad={true}
fields="name,email,picture"
callback={responseFacebook}
cssClass="my-facebook-button-class"
icon="fa-facebook"
/>,
document.getElementById('demo')
);
`
Custom element example:
`js
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(
autoLoad={true}
fields="name,email,picture"
callback={responseFacebook}
cssClass="my-facebook-button-class"
icon={
/>,
document.getElementById('demo')
);
`
$3
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
`js
import React from 'react';
import FacebookLogin from 'react-facebook-login';
class MyComponent extends React.Component {
responseFacebook(response) {
console.log(response);
}
render() {
return (
autoLoad={true}
fields="name,email,picture"
scope="public_profile,user_friends,user_actions.books"
callback={this.responseFacebook}
/>
)
}
}
export default MyComponent;
`
$3
`js
'use strict';
import React from 'react';
import FacebookLogin from 'react-facebook-login';
class MyComponent extends React.Component {
responseFacebook(response) {
console.log(response)
}
render() {
return (
autoLoad={true}
fields="name,email,picture"
callback={this.responseFacebook}
/>
)
}
}
export default MyComponent;
``