Skip to content

Instantly share code, notes, and snippets.

@orion110217
Created February 1, 2018 02:58
Show Gist options
  • Save orion110217/48343db3203440821a9763e277d1d655 to your computer and use it in GitHub Desktop.
Save orion110217/48343db3203440821a9763e277d1d655 to your computer and use it in GitHub Desktop.
FB SDK async loading in React
FB SDK is designed to not block you page. So it will not be ready as soon as you think it's ready (componentWillMount).
So do it like this if you want to make it your logged in criteria:
Create a component that will load the script:
class LoggedIn extends Components{
this.state = { isLoggedIn: false, loading: true }
componentDidMount(){
<enter fb sdk cript here from the docs>
* IMPORTANT, this will fire automatically after the SDK have been fully loaded *
window.fbAsyncInit = () => {
window.FB.init({
appId : facebook_app_id,
cookie : true,
xfbml : true,
version : 'v2.5'
});
* DO YOUR OTHER THINGS HERE *
window.FB.getLoginStatus(function (response) {
updateLogState = () => {
this.setState({
isLoggedIn: response.status === 'connected',
loading: false
})
}
};
}
render(){
return !this.state.isLoggedIn ? <ShowLoginButton /> : !this.state.loading ? <ShowSomethingElse /> : <Loading />
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment