React Facebook Components
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>
);
}
}
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>
);
}
}
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