React Facebook Login
React Component for Facebook Login. aims to improve react-facebook-login.
한글 가이드
- 💙 Typescript support
- 📦 6kb mini library
- 👫 All browsers supported
- 🏃 Currently maintaining
Table of contents
Getting Started
npm i --save @greatsumini/react-facebook-login
# or
yarn add @greatsumini/react-facebook-loginUsage
Component
import FacebookLogin from '@greatsumini/react-facebook-login';
// default
<FacebookLogin
appId="1088597931155576"
onSuccess={(response) => {
console.log('Login Success!', response);
}}
onFail={(error) => {
console.log('Login Failed!', error);
}}
onProfileSuccess={(response) => {
console.log('Get Profile Success!', response);
}}
/>
// custom style
<FacebookLogin
appId="1088597931155576"
style={{
backgroundColor: '#4267b2',
color: '#fff',
fontSize: '16px',
padding: '12px 24px',
border: 'none',
borderRadius: '4px',
}}
/>
// custom render function
<FacebookLogin
appId="1088597931155576"
onSuccess={(response) => {
console.log('Login Success!', response);
}}
onFail={(error) => {
console.log('Login Failed!', error);
}}
onProfileSuccess={(response) => {
console.log('Get Profile Success!', response);
}}
render={({ onClick, logout }) => (
<CustomComponent onClick={onClick} onLogoutClick={logout} />
)}
/>
// custom params, options
<FacebookLogin
appId="1088597931155576"
useRedirect
initParams={{
version: 'v10.0',
xfbml: true,
}}
dialogParams={{
response_type: 'token',
}}
loginOptions={{
return_scopes: true,
}}
/>FacebookLoginClient
You can manually call facebook sdk related functions with FacebookLoginClient
import { FacebookLoginClient } from '@greatsumini/react-facebook-login';
FacebookLoginClient.getLoginStatus((res) => {
console.log(res.status);
});
FacebookLoginClient.login((res) => {
console.log(res);
});
FacebookLoginClient.getProfile((res) => {
console.log(res.id, res.name, res.email);
});
FacebookLoginClient.logout(() => {
console.log('logout completed!');
});Examples
You can checkout examples here
Props
Check all available params,options here
| Property | Description | Type | Default |
|---|---|---|---|
| appId * | Your application ID. | string | - |
| language | API version | string | 'en_US' |
| scope | Comma seperated list of permissions for login. | string | 'public_profile, email' |
| fields | fields return by /me (profile) | string | 'name,email,picture' |
| onSuccess | function | - | |
| onFail | function | - | |
| onProfileSuccess | function | - | |
| style | css properties for login button | CSSProperties | - |
| children | Children Component | ReactNode | ReactNodeArray | "Login with Facebook" |
| render | Callback which render custom component | function | - |
| autoLoad | if true, request login on mount | boolean | false |
| useRedirect | if true, use redirect instead of window.FB.login | boolean | false (forced to be true in fb browers (ref)) |
| useCustomChat | if true, append 'xfbml.customerchat' to sdk url | boolean | false |
| initParams | params for FB.init | InitParams | docs |
| dialogParams | params for login dialog | DialogParams | docs |
| loginOptions | options for FB.login | LoginOptions | docs |
Stay in touch
- Author - Sumin Choi
License
React Facebook Login is MIT licensed.