Newts Parading Majestically

    react-facebook-sdk

    1.1.1 • Public • Published

    React Facebook Components

    NPM version

    Components

    • Facebook provider (provide settings to child components)
    • Login button (provide user profile and signed request)
    • Like button
    • Share and Share button
    • Comments
    • Comments count
    • Embedded post
    • Page
    • Feed

    Support us

    Star this project on GitHub.

    Usage

    Like button

    import React, { Component} from 'react';
    import FacebookProvider, { Like } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <Like href="http://www.facebook.com" colorScheme="dark" showFaces share />
          </FacebookProvider>
        );
      }
    }

    Share post

    import React, { Component} from 'react';
    import FacebookProvider, { Share } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <Share href="http://www.facebook.com">
              <button type="button">Share</button>
            </Share>
          </FacebookProvider>
        );
      }
    }

    Share button

    You can use predefined button with bootstrap and font awesome classNames

    import React, { Component} from 'react';
    import FacebookProvider, { ShareButton } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <ShareButton href="http://www.facebook.com" />
          </FacebookProvider>
        );
      }
    }

    Comments

    import React, { Component} from 'react';
    import FacebookProvider, { Comments } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <Comments href="http://www.facebook.com" />
          </FacebookProvider>
        );
      }
    }

    Comments count

    import React, { Component} from 'react';
    import FacebookProvider, { CommentsCount } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <CommentsCount href="http://www.facebook.com" /> Comments
          </FacebookProvider>
        );
      }
    }

    Login

    import React, { Component} from 'react';
    import FacebookProvider, { Login } from 'react-facebook';
     
    export default class Example extends Component {
      handleResponse = (data) => {
        console.log(data);
      }
     
      handleError = (error) => {
        this.setState({ error });
      }
     
      render() {
        return (
          <FacebookProvider appId="123456789">
            <Login
              scope="email"
              onResponse={this.handleResponse}
              onError={this.handleError}
            >
              <span>Login via Facebook</span>
            </Login>
          </FacebookProvider>
        );
      }
    }

    Custom login render

    If you want to use custom component you can use render or component property.

    import React, { Component} from 'react';
    import FacebookProvider, { Login } from 'react-facebook';
     
    export default class Example extends Component {
      handleResponse = (data) => {
        console.log(data);
      }
     
      handleError = (error) => {
        this.setState({ error });
      }
     
      render() {
        return (
          <FacebookProvider appId="123456789">
            <Login
              scope="email"
              onResponse={this.handleResponse}
              onError={this.handleError}
              render={({ isLoading, isWorking, onClick }) => (
                <span onClick={onClick}>
                  Login via Facebook
                  {(isLoading || isWorking) && (
                    <span>Loading...</span>
                  )}
                </span>
              )}
            />
          </FacebookProvider>
        );
      }
    }

    Embedded post

    import React, { Component} from 'react';
    import FacebookProvider, { EmbeddedPost } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <EmbeddedPost href="http://www.facebook.com" width="500" />
          </FacebookProvider>
        );
      }
    }

    Page

    import React, { Component} from 'react';
    import FacebookProvider, { EmbeddedPost } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <Page href="https://www.facebook.com" tabs="timeline" />
          </FacebookProvider>    
        );
      }
    }

    MessageUs

    import React, { Component} from 'react';
    import FacebookProvider, { MessageUs } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <MessageUs appId="123456789" pageId="123456789"/>
          </FacebookProvider>    
        );
      }
    }

    SendToMessenger

    import React, { Component} from 'react';
    import FacebookProvider, { SendToMessenger } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <SendToMessenger appId="123456789" pageId="123456789"/>
          </FacebookProvider>    
        );
      }
    }

    MessengerCheckbox

    import React, { Component} from 'react';
    import FacebookProvider, { MessengerCheckbox } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <MessengerCheckbox appId="123456789" pageId="123456789"/>
          </FacebookProvider>    
        );
      }
    }

    CustomChat

    import React, { Component} from 'react';
    import FacebookProvider, { CustomChat } from 'react-facebook';
     
    export default class Example extends Component {
      render() {
        return (
          <FacebookProvider appId="123456789">
            <CustomChat  pageId="123456789" minimized={false}/>
          </FacebookProvider>    
        );
      }
    }

    Support us

    Star this project on GitHub.

    Try our other React components

    Credits

    Zlatko Fedor

    Keywords

    none

    Install

    npm i react-facebook-sdk

    DownloadsWeekly Downloads

    602

    Version

    1.1.1

    License

    ISC

    Last publish

    Collaborators

    • flaviolivolsi