blueberryapps / react-load-script

React component that makes it easy to load 3rd party scripts

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to use?

Tzikas opened this issue · comments

I'm a little confused about the example: I have

handleScriptCreate() {
  this.setState({ scriptLoaded: false })
}
 
handleScriptError() {
  this.setState({ scriptError: true })
}
 
handleScriptLoad() {
  console.log(this)
  this.setState({ scriptLoaded: true })
  $('body').click(function(){
		alert('up')
   })
}
 
render() {
   return(

    <Script
      url="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
      onCreate={this.handleScriptCreate.bind(this)}
      onError={this.handleScriptError.bind(this)}
      onLoad={this.handleScriptLoad.bind(this)}
    />
  )
}

and I'm getting a error '$' is not defined . jQuery in component did mount doesn't work either. What am I doing wrong?

Script Loaded is true in the state.

commented

Any progress on this?

Have you tried window.$('body').click(function(){alert('up');})? If you're using webpack or anything, it won't have a reference to $ since it's not defined in your webpack config.

commented

im having his same issue, how can i access the script once loaded?

im having his same issue, how can i access the script once loaded?

if you use wbpack it's not a problem react-load-script
you need to add npm module jquery
and add to your component
import * as $ from 'jquery'; (window as any).jQuery = $; (window as any).$ = $;
that's all

webpack/webpack#4258 (comment)

Same issue here.