React Component for Facebook Login. aims to improve react-facebook-login.
한글 가이드
npm i --save @greatsumini/react-facebook-login
# or
yarn add @greatsumini/react-facebook-login
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,
}}
/>
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!');
});
You can checkout examples here
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 |
React Facebook Login is MIT licensed.