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: about 20 hours 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 (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-29T17:20:44.000Z (almost 7 years ago)
• Last Synced: 2024-09-19T07:10:14.687Z (6 days 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

        
[![npm](https://img.shields.io/npm/dm/facebook-login-redux-react.svg)](https://www.npmjs.com/package/facebook-login-redux-react)

[![Github file size](https://img.shields.io/github/size/iliran11/facebook-login-redux-react/build/index.js.svg?style=flat-square)](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.