Replaced classes to stateless components and used hooks to replace li…

demo/index.js

@@ -1,65 +1,44 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Router, Route, Link, browserHistory } from 'react-router';
-import FacebookLogin from '../src/facebook';
+import FacebookLogin from '../src/facebook'
 import FacebookLoginWithButton from '../src/facebook-with-button'
+import React from 'react'
+import ReactDOM from 'react-dom'
 
-const responseFacebook = (response) => {
-  console.log(response);
-};
+const responseFacebook = response => {
+  console.log(response)
+}
 
-class Base extends Component {
-  render() {
-    return (
+const Base = () => {
+  return (
+    <div>
       <div>
-        <Link to="/dummy">Route to dummy page</Link>
-
-        <div>
-          <p>Facebook login with default button and styling</p>
-          <FacebookLoginWithButton
-            appId="1088597931155576"
-            autoLoad
-            callback={responseFacebook}
-            icon="fa-facebook"
-          />
-        </div>
-
-        <div>
-          <p>Facebook login with render prop (and no styling provided out the box)</p>
-          <FacebookLogin
-            appId="1088597931155576"
-            autoLoad
-            callback={responseFacebook}
-            render={renderProps => (
-              <button onClick={renderProps.onClick}>This is my custom FB button</button>
-            )}
-          />
-        </div>
+        <p>Facebook login with default button and styling</p>
+        <FacebookLoginWithButton
+          appId='477947742822152'
+          autoLoad={false}
+          fields='name,email,picture'
+          onClick={() => console.log('component clicked')}
+          callback={responseFacebook}
+          icon='fa-facebook'
+        />
       </div>
-    );
-  }
-}
 
-class Dummy extends Component {
-  render() {
-    return (
       <div>
-        <Link to="/">Back</Link>
-        <h1>
-          This is just a dummy page to test the button<br />
-          <a href="https://github.com/keppelen/react-facebook-login/pull/76#issuecomment-262098946">
-            survives back and forth routing
-          </a>
-        </h1>
+        <p>
+          Facebook login with render prop (and no styling provided out the box)
+        </p>
+        <FacebookLogin
+          appId='477947742822152'
+          autoLoad={false}
+          callback={responseFacebook}
+          render={renderProps => (
+            <button onClick={renderProps.onClick}>
+              This is my custom FB button
+            </button>
+          )}
+        />
       </div>
-    );
-  }
+    </div>
+  )
 }
 
-ReactDOM.render(
-  <Router history={browserHistory}>
-    <Route path="/" component={Base}/>
-    <Route path="/dummy" component={Dummy}/>
-  </Router>,
-  document.getElementById('demo')
-);
+ReactDOM.render(<Base />, document.getElementById('demo'))