react-fb-login/README.md

React higher order component for Facebook Login

# **react-fb-login**

## **Description**
A higher order component to help you using the Facebook login plugin, using React.js.

---
## **Install**

```javascript
npm i react-fb-login
```

---

## **Props**

| Props        | Type        | Required      | Default Value  |
| ------------- |:-------------:|:-------------:|:--------------:|
| appId | string | yes | - |
| autoLoad | boolean | no | true |
| fbCSS | object | no | object |
| scope | string | no | 'public_profile' |
| cookie | boolean | no | false |
| language | string | no | navigator.language |
| redirect_uri | string | no | location.href |
| version | string | no | 'v3.0' |
| xfbml | boolean | no | false |
| loginCb | function | yes | - |
| notLoginCb | function | no | undefined |
| clickCb | function | no | undefined |

---
## **Example**
In the Github repo there is an example where you can run the component.


```javascript
/*********** FILE App.js ***********/
import React, { Component } from 'react';
import LoginButton from './LoginButton';

const Home = () => (
  <div>
      <span>Home</span>
  </div>
);

class App extends Component {
  state = {
    logged: false,
  };

  componentWillMount() {
      document.addEventListener('onFbLogin', (e) => {
         this.setState({logged: true});
      }, false);
  }

  render() {
      const {logged} = this.state;
      return !logged ? <LoginButton/> : <Home/>;
  }
}

export default App;
 ```

 ```javascript
/*********** FILE MyLoginButton.js ***********/
import React, { Component } from 'react';
import {FBLogin} from 'react-fb-login';

const params = {
    appId: 'your_facebook_app_id',
    scope: 'public_profile',
    cookie: false,
    language: 'en_US',
    version: 'v3.0',
    xfbml: true,
}

const onFbLoginEvent = () => {
    const fbLoginEvent = new Event('onFbLogin');
    document.dispatchEvent(fbLoginEvent);
}

const loginCb = (response) => {
    console.info('Already logged: ', response);
    onFbLoginEvent();
};

const notloginCb = (response) => {
    console.error('You are not logged: ', response);
};

const settings = {
    params,
    loginCb,
    notloginCb,
};

@FBLogin(settings)
export default class LoginButton extends Component {
    render() {
        return (
            <button style={this.props.fbCSS}>
                Login
            </button>
        );
    }
}
```
---
## **License**
This code has MIT license.