https://github.com/iliran11/facebook-login-redux-react
🐜 LightWeight And Simple React Component For handling Facebook Integration
https://github.com/iliran11/facebook-login-redux-react
api component facebook javascript react redux
Last synced: 9 months ago
JSON representation
🐜 LightWeight And Simple React Component For handling Facebook Integration
- Host: GitHub
- URL: https://github.com/iliran11/facebook-login-redux-react
- Owner: iliran11
- License: mit
- Created: 2017-04-14T17:03:40.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-11-29T17:20:44.000Z (over 8 years ago)
- Last Synced: 2025-01-31T19:11:13.435Z (over 1 year ago)
- Topics: api, component, facebook, javascript, react, redux
- Language: JavaScript
- Homepage:
- Size: 345 KB
- Stars: 10
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.MD
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/facebook-login-redux-react)
[](https://github.com/iliran11/facebook-login-redux-react/blob/master/build/index.js)
# Change Log - Version 1 🎂
* Reduced library size from 38k to 4.7kb!
* Styles can now be modified through props.
* Minor Changes to the props API.
Example: Integrating Button with Redux
======
source code can be found in [demo](https://github.com/iliran11/facebook-login-redux-react/tree/master/demo)
Installation
======
```
npm i facebook-login-redux-react
```
Usage
======
Props
------
| Props | Type | Default | Notes |
|--------------- |---------- |--------------------------------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| appId | string | None.It is a required prop. | |
| version | string | 'v2.9' | refer to [Facebook Docs](https://developers.facebook.com/docs/apps/changelog/) for explanation on available values |
| loginLabel | string | Log In To Facebook | |
| loginOptions | object | {scope: 'email'} | all options listed on [Facebook Docs](https://developers.facebook.com/docs/reference/javascript/FB.login/v2.9) are passable with camelCase. e.g : {returnScopes: false} |
| logoutLabel | string | Log out from Facebook | |
| onClick | function | | will execute before the onLoginEvent/onLogoutEvent. useful for triggering the fetching event for redux store. |
| sdkLoaded | Object | returns an object with the following keys:
isConnected: Boolean. is the User conneted?
FB: the api object. |
| onLoginEvent | function | | |
| onLogoutEvent | function | | |
Style Props
------
Style Props Accepts any valid String values for those css Properties:
| Prop Name | Default Value (String) |
|-----------------|-----------------------------------|
| width | None |
| padding | 0 15px 0px 46px |
| fontSize | 16px |
| backgroundImage | linear-gradient(#4C69BA, #3B55A0) |
| color | #FFF |
| lineHeight | 34px |
Example:
------
```xml
this.props.startFetching()}
/>
```
Development
======
- running the demo on dev server `npm start`. this will run the demo app, which is configured for redux,
Contribute
======
I welcome any kind of contributions/requests/questions/general feedback.
Please Open an Issue Or a pull request.
Tests
======
tests will be added hopefully soon.