Search code examples
reactjsreact-nativeuikitgetuikit

Access react's function with parameters from external JavaScript


Is it possible to add onclick event inside the messages' parameter of UIKIT.notification?
Something like this:

notif__undoDelete = (param) => {
    setTimeout(function(param) {
        UIkit.notification(
            `<div class="uk-flex uk-flex-middle uk-margin-medium-right">
                <span>Exercise Deleted.</span><a onclick="{here}" class="uk-button uk-button-primary uk-button-small uk-margin-auto-left">Undo</a>
            </div>`,
            { timeout: 6000, pos: "bottom-left" }
        )
    }, 800, param)
}

Solution

  • I use this answer to solve my problem
    Call react component's function from external JavaScript function

    I added in componentDidMount method first:

    componentDidMount () {
        var me = this
        window.undoDelete = () => {
            var external_me = this
            let param = JSON.parse(external_me.event.target.getAttribute("data-param"))
            me.undoDelete(param)
        }
    }
    

    I have an undoDelete() method somewhere and when I call my UIkit.notification it's gonna be something like this and my react's undoDelete() method will be called. I added data-param as well to pass parameters.

    UIkit.notification(
    `<div className="uk-flex uk-flex-middle uk-margin-medium-right">
         <span>Item Deleted.</span>
         <a onclick="window.undoDeleteExternal()" data-param='`+ JSON.stringify(param) +`' className="uk-button uk-button-primary uk-button-small uk-margin-auto-left">Undo</a>
    </div>`,
    { timeout: 6000, pos: 'bottom-left' }
    

    )