Skip to content

beiciye/react-facebook-login

 
 

Repository files navigation

React Facebook Login

An Component React for Facebook Login

Getting Started

git clone https://github.com/keppelen/react-facebook-login.git && cd react-facebook-login
npm install react react-dom react-facebook-login --save

Development

npm start

How to use

Basic

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login';

const responseFacebook = (response) => {
  console.log(response);
}

ReactDOM.render(
  <FacebookLogin
    appId="1088597931155576"
    autoLoad={true}
    callback={responseFacebook} />,
  document.getElementById('demo')
);

Custom CSS Class and Icon

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login';

const responseFacebook = (response) => {
  console.log(response);
}

ReactDOM.render(
  <FacebookLogin
    appId="1088597931155576"
    autoLoad={true}
    callback={responseFacebook}
    cssClass="my-facebook-button-class"
    icon="fa-facebook" />,
  document.getElementById('demo')
);

Server

'use strict';

import React from 'react';
import FacebookLogin from 'react-facebook-login';

class MyComponent extends React.Component {
  constructor(props) {
      super(props);
  };

  responseFacebook = (response) => {
    console.log(response);
  };

  render() {
    return (
      <FacebookLogin
        appId="1088597931155576"
        autoLoad={true}
        callback={responseFacebook} />
    )
  }
}

export default MyComponent;

Parameters

params value default value
appId string Required
size string small - medium - metro
scope string public_profile, email, user_birthday
callback function resultFacebookLogin
autoLoad boolean false
xfbml boolean false
textButton string Login with Facebook
cssClass string kep-login-facebook kep-login-facebook-[button-size]
version string 2.3
icon string none

About

A Component React for Facebook Login

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 72.7%
  • CSS 17.0%
  • HTML 10.3%