react-async-script-loader icon indicating copy to clipboard operation
react-async-script-loader copied to clipboard

How to override onScriptLoaded function?

Open queirozfcom opened this issue 8 years ago • 5 comments

Hi. I'm trying to set a function different from noop (the default) to be triggered but I can't seem to be able to do it. I've tried changing defaultProps for the wrapped component but that didn't work.

Ideally, I wanted to be able to define the function when I call the scriptLoader function, maybe like this: (the name of my wrapper component is Metrics)

export default scriptLoader(
  [
    'http://path.to.my.script.net/script.js'
  ],'', function(){ console.log('onScriptLoader was called...'); })(Metrics);

Is this (or something like this) possible?

Thank you

queirozfcom avatar Apr 13 '16 01:04 queirozfcom

This is how onScriptLoader works:

const MockedComponent = AsyncScriptLoader.apply(null, deps)(TestComponent)

<MockedComponent onScriptLoaded={onScriptLoaded} />

About you idea, yes, I think it's possible, but I haven't seem the conclusive issue to add this api, if I missed sth., please let me know.

leozdgao avatar May 02 '16 16:05 leozdgao

Hi @leozdgao, I am unclear on the usage of onScriptLoaded in the ES7 Decorator version as well. I assume it is to let the child component know that the script has loaded, but not sure how an HoC can call a function in the child component?

Am I misunderstanding the usage? Is there an example with the ES7 Decorator usage that you could provide for this function?

oyeanuj avatar Dec 04 '16 05:12 oyeanuj

@leozdgao I agree with @oyeanuj . The usage of onScriptLoaded is unclear, it is not described in the docs as well. I want to mount a component after my script loads. How should I use onScriptLoaded in such a case?

vsc-github avatar Jul 07 '17 09:07 vsc-github

Please provide documentation for the onScriptLoaded prop.

andreicimpoesu avatar Mar 13 '18 17:03 andreicimpoesu

Please could someone give an example of how to use the onScriptLoaded function. else going to have to find a different library to use, which sucks :(

I know the author wrote:

This is how onScriptLoader works: const MockedComponent = AsyncScriptLoader.apply(null, deps)(TestComponent)

but, maybe I am benig dense, I don't under stand how that would relate to the code example in the docco:

import React, { Component } from 'react' import scriptLoader from 'react-async-script-loader'   class Editor extends Component {   ...     componentWillReceiveProps ({ isScriptLoaded, isScriptLoadSucceed }) {     if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished        if (isScriptLoadSucceed) {         this.initEditor()       }       else this.props.onError()     }   }     componentDidMount () {     const { isScriptLoaded, isScriptLoadSucceed } = this.props     if (isScriptLoaded && isScriptLoadSucceed) {       this.initEditor()     }   }     ... }   export default scriptLoader(   [     'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js',     'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'   ],   '/assets/bootstrap-markdown.js' )(Editor)

??

jpt1971 avatar Mar 21 '18 08:03 jpt1971