# react-facebook-login-with-children

> React Facebook login component forked from https://www.npmjs.com/package/react-facebook-login

Latest version **3.6.6** (published 2017-06-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-facebook-login-with-children
pnpm add react-facebook-login-with-children
yarn add react-facebook-login-with-children
bun add react-facebook-login-with-children
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.6.6 |
| Published | 2017-06-27 |
| First published | 2017-06-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1197 |
| Author | Giovanni Keppelen |
| Maintainers | hardsix |
| Keywords | react, reactjs, react-component, facebook-login, react-facebook-login |

## Links

- npm: https://www.npmjs.com/package/react-facebook-login-with-children
- Repository: https://github.com/keppelen/react-facebook-login
- Issues: https://github.com/keppelen/react-facebook-login/issues
- npm.io page: https://npm.io/package/react-facebook-login-with-children

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.6.6 (latest) — 2017-06-27
- 3.6.5 — 2017-06-27
- 3.6.4 — 2017-06-27
- 3.6.3 — 2017-06-27
- 3.6.2 — 2017-06-27

## README

# React Facebook Login - [![Build Status](https://travis-ci.org/keppelen/react-facebook-login.svg?branch=master)](https://travis-ci.org/keppelen/react-facebook-login)

> A Component React for Facebook Login

## Getting Started
```shell
git clone https://github.com/keppelen/react-facebook-login.git && cd react-facebook-login
npm install react react-dom react-facebook-login --save
```

## Development
```shell
npm start
```

- navigate to [localhost:8080](http://localhost:8080)

## How to use

### Basic
```js
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}
    fields="name,email,picture"
    onClick={componentClicked}
    callback={responseFacebook} />,
  document.getElementById('demo')
);
```

### Custom CSS Class and Icon
By default fontawesome is included, If you don't want to use default fontawesome icons, you can send an element in icon attribute

Fontawesome example:
```js

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}
    fields="name,email,picture"
    callback={responseFacebook}
    cssClass="my-facebook-button-class"
    icon="fa-facebook"
  />,
  document.getElementById('demo')
);
```

Custom element example:
```js

import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login';
import TiSocialFacebookCircular from 'react-icons/lib/ti/social-facebook-circular';

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

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

### Custom permission
By default the component, request only 'public_profile' permission, you can change if you send 'scope', that is a string comma separated attribute.

see https://developers.facebook.com/docs/facebook-login/permissions for permissions list

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

  class MyComponent extends React.Component {
    responseFacebook(response) {
      console.log(response);
    }

    render() {
      return (
        <FacebookLogin
          appId="1088597931155576"
          autoLoad={true}
          fields="name,email,picture"
          scope="public_profile,user_friends,user_actions.books"
          callback={this.responseFacebook}
        />
      )
    }
  }
  
  export default MyComponent;
```

### Server
```js
'use strict';

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

class MyComponent extends React.Component {
  responseFacebook(response) {
    console.log(response)
  }

  render() {
    return (
      <FacebookLogin
        appId="1088597931155576"
        autoLoad={true}
        fields="name,email,picture"
        callback={this.responseFacebook}
      />
    )
  }
}

export default MyComponent;
```


## Parameters

|    params    |     value           |                default value                        |
|:------------:|:-------------------:|:---------------------------------------------------:|
|     appId    |     string          |                Required                             |
|     size     |     string          |              small - medium - metro                 |
|     scope    |     string          |      public_profile, email, user_birthday           |
|     fields   |     string          |              name,email,picture                     |
|   callback   |     function        |             resultFacebookLogin                     |
|   autoLoad   |     boolean         |                  false                              |
|     xfbml    |     boolean         |                  false                              |
|reAuthenticate|     boolean         |                  false                              |
|   textButton |     string          |           Login with Facebook                       |
|   cssClass   |     string          | kep-login-facebook kep-login-facebook-[button-size] |
| redirectUri  |     string          |               window.location.href (mobile-only)    |
|   version    |     string          |                  2.3                                |
|   icon       |     string|element  |                  none                               |
|   language   |     string          |                  en_US                              |
|   onClick    |     function        |                  Initial click on the component     |
|   isMobile   |     boolean         |                  detected via userAgent             |
|     tag      |     string          |                  HTML Element, Ex: 'a', 'button'             |

---
_Source: https://npm.io/package/react-facebook-login-with-children · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._