search

leozdgao / react-async-script-loader

A decorator for script lazy loading on react component
MIT License
258 stars 55 forks source link

How to override onScriptLoaded function? #3

Open queirozfcom opened 8 years ago

queirozfcom commented 8 years ago

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

leozdgao commented 8 years ago

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.

oyeanuj commented 7 years ago

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?

vsc-github commented 7 years ago

@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?

andreicimpoesu commented 6 years ago

Please provide documentation for the onScriptLoaded prop.

jpt1971 commented 6 years ago

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)

??