madeinfree / react-facebook-login-hoc Goto Github PK

View Code? Open in Web Editor NEW

For react facebook third-party login higher order component, and easily to use facebook api

HTML 3.36% JavaScript 96.64%

react-facebook-login-hoc's Introduction

React Facebook Login HOC

What is ?

Easily for you to append facebook root dom and dependencies file

Installation

npm install react-facebook-login-hoc

Exposed API

this.props.fb.status(callback(response): function) - callback function will response facebook login auth status
this.props.fb.login(callback(response): function [,scope: object]) - callback function will response login result
this.props.fb.logout()

default Props

params	value	default value
appId	string	Required
scope	string	public_profile
xfbml	boolean	false
cookie	boolean	false
version	string	2.6
language	string	en_US

Configuration

const configureLoginProps = {
  appId: 'Your APP ID',
  scope: 'public_profile, email',
  xfbml: false,
  cookie: false,
  version: 2.6,
  language: 'en_US'
}

How to use ?

import React, { Component } from 'react'
import { render } from 'react-dom'

import LoginHOC from 'react-facebook-login-hoc'

const configureLoginProps = {
  scope: 'public_profile',
  xfbml: false,
  cookie: false,
  version: 2.6,
  language: 'en_US',
  appId: '488387194689361'
}

class App extends Component {
  constructor(props) {
    super(props)

    this.status = this.props.fb.status
    this.login = this.props.fb.login
    this.logout = this.props.fb.logout
  }
  getStatus(response) {
    if (response.authResponse) {
      this.responseApi.call(this, response.authResponse)
    }
  }
  responseApi(res) {
    console.log('token:', res.accessToken)
  }
  checkLoginState() {
    this.status(this.getStatus.bind(this))
  };
  loginFacebook() {
    this.login(this.getStatus.bind(this))
  }
  logoutFacebook() {
    this.logout()
  }
  render() {
    return (
      <div>
        <button onClick={ this.checkLoginState.bind(this) }>Get Facebook Login Status</button>
        <button onClick={ this.loginFacebook.bind(this) }>Facebook Login</button>
        <button onClick={ this.logoutFacebook.bind(this) }>Facebook Logout</button>
    );
  }
}

export default LoginHOC(configureLoginProps)(App);