Well-typed React Component for Facebook Login
npm install @greatsumini/react-facebook-login
React Component for Facebook Login. aims to improve react-facebook-login.
한글 가이드
- 💙 Typescript support
- 📦 6kb mini library
- 👫 All browsers supported
- 🏃 Currently maintaining
- Getting Started
- Usage
- Component
- FacebookLoginClient
- Examples
- Props
- Stay in touch
- License
- Links
``shell`
npm i --save @greatsumini/react-facebook-loginor
yarn add @greatsumini/react-facebook-login
`tsx
import FacebookLogin from '@greatsumini/react-facebook-login';
// default
onSuccess={(response) => {
console.log('Login Success!', response);
}}
onFail={(error) => {
console.log('Login Failed!', error);
}}
onProfileSuccess={(response) => {
console.log('Get Profile Success!', response);
}}
/>
// custom style
style={{
backgroundColor: '#4267b2',
color: '#fff',
fontSize: '16px',
padding: '12px 24px',
border: 'none',
borderRadius: '4px',
}}
/>
// custom render function
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 }) => (
)}
/>
// custom params, options
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
`tsx
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 |
- Author - Sumin Choi
React Facebook Login is MIT licensed.