I have added Facebook login api into React app
// index.html
<body>
<div id="fb-root"></div>
<script src="https://connect.facebook.net..." etc... />
<script>
const FB = window.FB;
window.fbAsyncInit = function() {
FB.init({etc...});
FB.AppEvents.logPageView();
}
</script>
etc...
<div id="root"></div>
</body>
And then another one in the React provider
// SomeProvider.js
const SomeProvider = () => {
useEffect(() => {
window.FB.getLoginStatus((res) => {etc...});
}, []);
etc...
}
The error message I'm getting is that FB is not defined in SomeProvider.js and then another same message for react-dom.production.min.js.
I don't understand why.
Update
When I repeatedly refresh, sometimes that error doesn't appear, which makes me think that this is an asynchronous issue. It seems that window.FB.getLoginStatus needs to wait until FB.init in index.html is done. Am I correct with this assessment? Any recommendations regarding this?
you may try add [window.FB] as deps of useEffect of someprovide
Related
I am working on React.js. I want to know how to integrate tableau with React JS code. If you have any reference let me know
Thanks for Advance
If you want to integrate your Tableau dashboard in your ReactJS application, you can either use the Tableau JavaScript API
Add this inside your Index.html : <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
and create one component to render the dashboard as per the instructions
here.
OR
use the Tableau-React library.
Add:
<script type="text/javascript" src="https://<tableauurl>/javascripts/api/tableau-2.min.js"></script>
then add:
const { tableau } = window;
const url = "https://<tableau-dashboard-url>/views/testing/map";
const ref = useRef(null)
console.log(ref);
function initViz(){
new tableau.Viz(ref.current, url);
}
useEffect(() => {
initViz();
},[])
And inside return, add below line:
<div ref={ref}></div>
It will work for sure :)
I am trying to use the Stripe API to allow for payment through my website, but I am having issues adding Stripe into my project.
I used the create-react-app structure for my project, and added Stripe into the index.html file in /public/index.html as follows:
<body>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.39.0.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script>
window.AWSCognito = window.AWS
</script>
<script src="https://gitcdn.xyz/repo/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js"></script>
<div id="root"></div>
</body>
However when I test, I get an error:
/src/api/stripe.js
2:5 error 'Stripe' is not defined no-undef
My stripe.js file:
export const getStripeToken = (card) => new Promise((resolve, reject) => {
Stripe.card.createToken(card, (status, {error, id}) => {
if (error) {
reject(error.message);
} else {
resolve(id);
}
});
});
Thanks in advance!
I figured it out! I was being a bit of a dumby.
I changed Stripe to window.Stripe in my code, and it works now!
Thanks everyone.
It's only a problem of getting it compiled. The proper way to fix it is to ask compiler to not look for Stripe and it will be available globally. Add this comment /* global Stripe */ before you initialize Stripe:
/* global Stripe */
const stripe = Stripe('STRIPE_KEY');
I am learning AngularJS and trying to do my first app where I count the number of characters left in the message text area. However, when I have
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myContactApp", []);
app.controller("nmContactCtrl", function ($scope) {
console.log("In nmContactCtrl");
$scope.message = "";
$scope.charactersLeft = function () {
return 200 - $scope.userMessage.length;
};
});
</script>
the "angular.module" gives error in "var app = angular.module("myContactApp", []);" saying "The global variable angular is not declared". I have the minified angular.js in the script. Not sure why this showing the error.
Please let me know. Thanks.
You're missing a quotation mark.
<script src="http
<html>
<head></head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myContactApp", []);
app.controller("nmContactCtrl", function ($scope) {
console.log("In nmContactCtrl");
$scope.message = "";
$scope.charactersLeft = function () {
return 200 - $scope.userMessage.length;
};
});
</script>
</body>
</html>
There are no errors here if I run this locally.
Do you have a 'https' site? Because when I tried to repeat this on jsfiddle I got this error because there was also another one: "The page was loaded over HTTPS, but requested an insecure script"
So, if you use https then you should load AngularJS over https too:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
I've been trying to get this to work for ages, but no matter what I do the directive can't find my react component.
These are the files I'm including:
<script src="bower_components/react/JSXTransformer.js"></script>
<script src="bower_components/react/react-with-addons.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>
<script src="node_modules/babel-core/browser.js"></script>
<script src="static/react-components.min.js" type="text/babel"></script>
<script src="static/main.min.js"></script>
Where my components are inside the react-components.min.js file, and all of my angular code is inside main.min.js.
It's stated that you (might(?)) need to use an in browser transformator for this directive to work, so I tried that using babel, but that also doesn't work.
This is my react component:
<react-component name="Chat" watch-depth="reference"></react-component>
And in the react-components.min.js file I got a component called 'Chat':
var Chat = React.createClass({
render: function() {
return <footer className="chat chat--dark">Hello John</footer>;
}
});
core.value('Chat', Chat); // My application is bound to the core module
But it doesn't find it.. What could be wrong because no one else seems to have this issue?
JSX Compilation Issue
I believe it is a compilation error. I ran your code through an online compiler (https://babeljs.io/repl/) swap your current component code out with the block below and see if it works:
"use strict";
var Chat = React.createClass({
displayName: "Chat",
render: function render() {
return React.createElement(
"footer",
{ className: "chat chat--dark" },
"Hello John"
);
}
});
core.value('Chat', Chat); // My application is bound to the core module
JSXTransformer is deprecated you should add in a build step that uses Babel.
https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html
Check out my blog post for the breakdown on adding JSX and ES6 support.
http://blog.tylerbuchea.com/migrating-angular-project-to-react/
I'm having an issue using the Google Api in my angularjs 1.3 (SPA using ui.router). Per the google api instructions, I added a reference to the client.js file with a call back in my index.html head,
<html ng-app="myApp">
<head>
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script>
function LoadGAPI() {
}
</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=LoadGAPI"></script>
As I understand, client.js will asynchronously load the full client api, and when complete call the defined function LoadGAPI.
Sometimes LoadGAPI is called before my angular app .run is called, and sometimes it is not. I don't mind that it loads asynchonously.. but how can I alert my angular app that it is indeed ready for use?
I faced something similar before and there are two ways of solving it, one is delaying the whole angular's bootstrapping till the other library gets loaded by triggering it manually after LoadGAPI and dom ready, something like:
var n = 0;
function LoadGAPI () {
// Only pass after the first call
if (n++) {
angular.bootstrap(angular.element(document).find('html'), ['app']);
}
};
angular.element(document).ready(LoadGAPI);
and the other one is ensuring the library's presence only for the ui-router states needing it using resolve:
State
$stateProvider
...
.state('some.state', {
url : '/some',
templateUrl: 'view/some.state.html',
controller : 'some.state',
resolve : GAPI.resolver
})
...
Resolver
var GAPI = {
ready : false,
resolver: {
api: ['$q', function($q) {
if (!GAPI.deferred) {
GAPI.deferred = $q.defer();
}
if (GAPI.ready) {
GAPI.deferred.resolve();
}
return GAPI.deferred.promise;
}]
}
};
window.LoadGAPI = function () {
GAPI.ready = true;
if (GAPI.deferred) {
GAPI.deferred.resolve();
}
};
The second one can be simplified, but I hope you get the idea.