How to Block the screen when copy and paste the data using Reactjs

Tags: #<Tag:0x00007efc70995688>
#1

Dear Team,

Is there way to Block and unblock the screen when copy and past is in-progress. We have tried with Before Paste and After Paste but It did not worked. Please help us is there a way.We are using ReactJs

Thanks

#2

Welcome @rohit.parwal

we do not have a predefined option like that. I have a preloader demo https://jsbin.com/polopewuvi/1/edit?html,js,output but it lacks the logic of before/afterPaste.

#3

Thanks for quick reply. Is there a demo with Reactjs? actually the issue is we are using the setState methods.when this.setState() called in afterPaste method we are losing the instance of Handsontable. Could you let us know is there any other way to implement this with ReactJs.
render() {
if (!this.state.isLoaded) {
return ();
} else { – Display page}

-- Code in paste method

     beforePaste :function (data, coords){
                    this.setState({
                        isLoaded: false
                    });},
                afterPaste :function (data, coords){
                    this.setState({
                        isLoaded: true
                    });
                },

Appreciate your help!

#4

Have you considered using a layer? Here’s an example with a layer using React https://jsfiddle.net/manxvyt2/

#5

Thanks @aleksandra_budnik. This is helpful somewhat but when i am dealing with large the hidden visibility coming late. For example I have pasted 3000 records in example grid( https://jsfiddle.net/manxvyt2/) it did not show anything but hidden visibility came after some time. Please let us know is there any other way we can achieve this.
Appreciate your help!

#6

You may want to replace the beforePaste hook with afterDocumentKeyDown or even beforeKeyDown as it looks like the afterPaste is the last hook to be called on that action https://handsontable.com/docs/7.0.3/tutorial-using-callbacks.html

#7

Still not a 100% solution but it solved some what.I have used blockUI https://availity.github.io/react-block-ui/ to show loading…

#8

That project looks promising. Glad to hear that it works well.

#9