CODEWITHSUNDEEP
javascriptreactjs
tommy123
tommy123

Reputation: 587

How to blur/disable parent component when child page (popup page) is opened?

I am working with React. I want to know about the easiest way on how to to blur parent component when child page (popup page) is opened.

Here is my Fiddle Workspace Demo

Even if I blur it the parent should still be clickable Can anyone show how to achieve this functionality?

Upvotes: 1

Views: 2261

Answers (4)

Arcot Deepika
Arcot Deepika

Reputation: 449

Since you are working on react, I would like to suggest you to use react-responsive-modal library. You can install this using npm. It is easily customizable via props. Please find the example below: https://codesandbox.io/s/9jxp669j2o

Upvotes: 0

Mahee Gamage
Mahee Gamage

Reputation: 613

The feature you are looking for is already in Semantic-UI-React Modal. This is very easy to use, you only have to pass some props to get above result.

demo https://react.semantic-ui.com/modules/modal/#variations-dimmer

Upvotes: -1

Arun AK
Arun AK

Reputation: 4370

We can use CSS to blur the parent component. Something like this:

  1. We will wrap the child component into a div with the class name as overlay
  2. Apply CSS effect to blur the parent component

[Note: You can also add the click event to the blur areas by adding the event to the overlay div]

{this.state.childOpen && (
  <div className="overlay">
    <div className="overlay-opacity" />
    <Child data={data} applyFilter={this.applyFilter} />
  </div>
)}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.overlay-opacity {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
}

Here is the live demo

To hide the child component onclick of the blur area, we can add a event like this

hideChild() {
  this.setState({
    childOpen: false
  });
}

Here is the live demo

Hope it helps :)

Upvotes: 4

Maheer Ali
Maheer Ali

Reputation: 36564

What i understood is that you want to blur the table when child is opened Here is code you need to add 

formatStyle = () => {
  if (this.state.childOpen == true) return { filter: "blur(5px)" };
   else return {};
};
//add formatStyle in main app
styleData={this.formatStyle()}  // in props on table
style = {this.props.styleData} //add this attribute in main container of table component
styleData={this.formatStyle()} // Pass this in ReactTable in main app

Upvotes: -1

Related Questions