JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 24016
  • Score
    100M100P100Q142018F
  • License MIT

Facebook components like a Login button, Like, Share, Comments or Embedded Post

Package Exports

  • react-facebook

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-facebook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>    
    );
  }
}

Support us

Star this project on GitHub.

Try our other React components

Credits

Zlatko Fedor