A Component React for Facebook Login
npm install react17-facebook-login> A Component React for Facebook Login
- yarn add react-facebook-login or npm install react-facebook-login
- Your application will also need react-dom and react installed.
``shell`
git clone https://github.com/keppelen/react-facebook-login.git && cd react-facebook-login
npm install react react-dom react-facebook-login --save --force
npm start
- navigate to localhost:8080
`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')
);
`
If you're providing all your own custom styling, you can use the render prop build. This build doesn't include any CSS or additional code needed to customise the look of the button, and instead leaves that entirely up to you. You can see an example of this in demo/index.js.
To make sure you import the right version, you will need to update your import line:
`js`
import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'
`
autoLoad
callback={responseFacebook}
render={renderProps => (
)}
/>
The render function will be passed the following properties for you to use:
- onClick
-
-
-
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')
);
`
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;
`
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;
``