React Facebook Login –
A Component React for Facebook Login
Getting Started
yarn add react-facebook-login
ornpm install react-facebook-login
- Your application will also need
react-dom
andreact
installed.
Development
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
How to use
Basic button with styling
Facebook button without styling
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:
import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'
<FacebookLogin
appId="1088597931155576"
autoLoad
callback={responseFacebook}
render={renderProps => (
<button onClick={renderProps.onClick}>This is my custom FB button</button>
)}
/>
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:
Custom element example:
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
Server
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 |
returnScopes | boolean | false |
autoLoad | boolean | false |
xfbml | boolean | false |
cookie | 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 | 3.1 |
icon | string | element |
language | string | en_US |
onClick | function | Initial click on the component |
isMobile | boolean | detected via userAgent |
disableMobileRedirect | boolean | false |
isDisabled | boolean | undefined |
tag | string | HTML Element, Ex: ‘a’, ‘button’ |
onFailure | function | optional function to separatere the failed init |
state | string | optional string to maintain state between the request and callback. This parameter should be used for preventing Cross-site Request Forgery and will be passed back to you, unchanged, in your redirect URI |
authType | string | optional string to change authentication type |
responseType | string | optional string to change response type. Default value is ‘code’ |