Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/greatsumini/react-facebook-login
Well-Typed React Component for Facebook Login
https://github.com/greatsumini/react-facebook-login
facebook facebook-login jest oauth react reactjs storybook typescript
Last synced: 1 day ago
JSON representation
Well-Typed React Component for Facebook Login
- Host: GitHub
- URL: https://github.com/greatsumini/react-facebook-login
- Owner: greatSumini
- License: mit
- Created: 2021-04-30T09:27:32.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-28T06:29:20.000Z (4 months ago)
- Last Synced: 2024-05-28T07:04:21.687Z (4 months ago)
- Topics: facebook, facebook-login, jest, oauth, react, reactjs, storybook, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@greatsumini/react-facebook-login
- Size: 21.8 MB
- Stars: 102
- Watchers: 3
- Forks: 28
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Facebook Login
[](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
[](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
[](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
[](https://github.com/greatSumini/react-facebook-login/actions/workflows/ci.yml)
[](https://github.com/greatSumini/react-facebook-login/actions/workflows/cd.yml)
[](https://github.com/greatSumini/react-facebook-login)
React Component for Facebook Login. aims to improve [react-facebook-login](https://github.com/keppelen/react-facebook-login).
[한글 가이드](https://sumini.dev/guide/016-react-facebook-login/)
- 💙 Typescript support
- 📦 6kb mini library
- 👫 All browsers supported
- 🏃 Currently maintaining
## Table of contents
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Component](#component)
- [FacebookLoginClient](#facebookloginclient)
- [Examples](#examples)
- [Props](#props)
- [Stay in touch](#stay-in-touch)
- [License](#license)
- [Links](#links)
## Getting Started
```shell
npm i --save @greatsumini/react-facebook-login
# or
yarn add @greatsumini/react-facebook-login
```
## Usage
### Component
```tsx
import FacebookLogin from '@greatsumini/react-facebook-login';
// default
{
console.log('Login Success!', response);
}}
onFail={(error) => {
console.log('Login Failed!', error);
}}
onProfileSuccess={(response) => {
console.log('Get Profile Success!', response);
}}
/>
// custom style
// custom render function
{
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
```
### FacebookLoginClient
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!');
});
```
## Examples
You can checkout examples [here](./examples)
## Props
Check all available params,options [here](./docs/params.md)
| 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](https://github.com/greatSumini/react-facebook-login/issues/2))) |
| useCustomChat | if true, append 'xfbml.customerchat' to sdk url | boolean | false |
| initParams | params for FB.init | InitParams | [docs](./docs/params.md) |
| dialogParams | params for login dialog | DialogParams | [docs](./docs/params.md) |
| loginOptions | options for FB.login | LoginOptions | [docs](./docs/params.md) |
## Stay in touch
- Author - [Sumin Choi](https://sumini.dev)
## License
React Facebook Login is [MIT licensed](./LICENSE).
## Links
- [NPM](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
- [GitHub](https://github.com/greatSumini/react-facebook-login)
- [(Official) Facebook Login Guide](https://developers.facebook.com/docs/facebook-login/web)