Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@greatsumini/react-facebook-login
Advanced tools
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.
FAQs
Well-typed React Component for Facebook Login
The npm package @greatsumini/react-facebook-login receives a total of 10,725 weekly downloads. As such, @greatsumini/react-facebook-login popularity was classified as popular.
We found that @greatsumini/react-facebook-login demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.