How do you add components such as charts in google trends in reactjs?
componentDidUpdate() {
const that = this
const keyword = "your keyword"
conts script = document.createElement("script")
script.src = "https://ssl.gstatic.com/trends_nrtr/760_RC08/embed_loader.js"
script.async = true
ReactDOM.findDOMNode(this.refs.trendsWrapper1).appendChild(script)
script.onload = function () {
trends.embed.renderExploreWidgetTo(ReactDOM.findDOMNode(that.refs.trendsWrapper1), "TIMESERIES", {"comparisonItem":[{"keyword":keyword,"geo":"","time":"today 5-y"}],"category":0,"property":""}, {"exploreQuery":"q=%2Fm%2F0rfgxy2","guestPath":"https://www.google.co.uk:443/trends/embed/"})
}
}
I tried this and didn't work. Please try to suggest a much easier method than this as well.
You need to load the embed_loader script out side of react (like any other 3rd lib code)
At the component, run the trends.embed command.
var Trends = React.createClass({
render: function() {
trends.embed.renderWidget("US_cu_mqCQGFwBAABWOM_en",
"fe_line_chart_309e703b-7d68-4baa-8dc9-c12e2f9defc3",
{"guestPath":"https://trends.google.com:443/trends/embed/"});
return (
<div>must return something :/</div>
)}
});
Here is an example
Related
I want to run an external JS which is actually opencv.js. I need to access its CV variable and then calling other functions.
I am adding below codes to my useeffect hook as follow:
export default function PolygonCropper(props) {
...
useEffect(() => {
const script = document.createElement("script");
script.src = "https://docs.opencv.org/3.4.0/opencv.js";
script.async = false;
document.body.appendChild(script);
//
console.log('cv from opencv is');
console.log(window["cv"]);
....
}
However, I can't access window["cv"] and it is undefined when I look at logs in chrome.
EDIT:
looking at Chrome log by console.log(window). I can see the window and CV inside it but I can access window["cv"]
So need to following dependency in my application:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY></script>
Problem is I don't have my key until runtime. I am not sure what the "react" way of injecting this at runtime would be? I realize i could get the head element and add the html in the window onload event like below:
document.head.append('<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY></script>');
Is this the best way to do this?
have you tried to add on your componentDidMount or useEffect?
componentDidMount() {
const script = document.createElement('script');
const key = <GET_YOUR_API_KEY>
script.type = 'text/javascript';
script.src = `https://maps.google.com/maps/api/js?key=${key}`;
script.id = 'someID';
document.body.appendChild(script);
script.addEventListener('load',() => console.log('map loaded'))
}
I have a react class component where I need to load the facebook social comment plugin so that users can leave their comment. I've written the code like this:
This is the componentDidMount function:
componentDidMount() {
window.fbAsyncInit = () => {
window.FB.init({
appId: getConfigarationByKey('fb_app_id'),
xfbml: true,
version: 'v8.0'
})
window.FB.Event.subscribe('xfbml.render', this.stopSpinner)
}
var sdkSrc = ''
if (localStorage.getItem('lang') === 'en')
sdkSrc = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0'
else sdkSrc = '//connect.facebook.net/bn_IN/sdk.js#xfbml=1&version=v8.0'
;(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0]
if (d.getElementById(id)) {
return
}
const js = d.createElement(s)
js.id = id
js.src = sdkSrc
fjs.parentNode.insertBefore(js, fjs)
})(document, 'script', 'facebook-jssdk')
if (window.FB && window.FB.XFBML) {
window.FB.XFBML.parse()
}
}
And when I change route, I clean up the comment plugin codes like this:
componentWillUnmount() {
if (window.FB) delete window.FB
document.getElementById('fb-root').outerHTML = ''
document.getElementById('facebook-jssdk').outerHTML = ''
}
And Finally I wrote the html as per it's suggested in the official docs
render() {
return (
<Card>
<CardContent>
<div
className="fb-comments"
data-colorscheme="dark"
data-href={window.location.href}
data-numposts="5"
data-width="100%"
></div>
</CardContent>
</Card>
)
}
That is all. The comment plugin loads and works fine, but it takes almost 30 seconds to load on the page which is a very bad user experience. Can anyone please help me why it is taking this much time to load ? And how I can improve it. Thank you.
I am developing with Ionic + Capacitor + React and I need to read all contacts numbers.
Using ionic-native/contacts in this way:
import { Contacts, ContactFindOptions } from '#ionic-native/contacts';
...
loadContacts() => {
this.setState(
{
loading: true,
},
() => {
var contacts = new Contacts();
const desiderFields = ['phoneNumbers'];
var options = new ContactFindOptions();
options.filter = '';
options.multiple = true;
options.hasPhoneNumber = true;
contacts.find(desiderFields, options).then((result) => { ... } );
});
}
componentDidMount() {
this.loadContacts();
}
But as soon as loadContacts start reading contacts the UI blocks and not even the state has time to render to show the loader.
Plus, the it is very slow importing contacts, showing repeatedly Fetching in bulk 250 contacts!.
I know that cordova-plugin-contacts is deprecated but I can't believe that those not exists valide alternatives to this fundamental feature.
Can't find solution.
I found this cordova plug-in that saved my life:
https://github.com/dbaq/cordova-plugin-contacts-phone-numbers
https://affiliate-program.amazon.com/welcome/getstarted_fifth
Is it possible to introduce Amazon Native Shopping Ads' 「Search Ads 」 into the React project?
I attempted trial and error, but I do not think that it is probably going well with global variable issues.
Here is how I did it.
If your Native Shopping Ads code looks like this:
<div id="amzn-assoc-ad-xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>
In your component,
componentDidMount () {
const script = document.createElement("script");
script.src = "//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
script.async = true;
document.body.appendChild(script);
}
In your JSX
<div id="amzn-assoc-ad-xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"> </div>
Yes it works very well with this logic but I made a better version out of it.
In your React Hook
useEffect(() => {
const script = document.createElement('script')
script.text = `amzn_assoc_ad_type = "banner"; amzn_assoc_marketplace = "amazon"; amzn_assoc_region = "US"; amzn_assoc_placement =
"assoc_banner_placement_default"; .................`
const script2 = document.createElement('script')
script2.src = '//z-na.amazon-adsystem.com............'
script2.async = false
const amazonAdd = document.querySelector('#amzn_assoc_ad_div_assoc_banner_placement_default_0')
if (amazonAdd) {
amazonAdd.appendChild(script)
amazonAdd.appendChild(script2)
}
}, [])
In your JSX
<div id="amzn_assoc_ad_div_assoc_banner_placement_default_0" />
You need to use the exact same id than amazon uses. Take a look in your DOM to see how this amazon script append a div in your DOM, get its id and use the same in your JSX div