CODEWITHSUNDEEP
javascriptreactjs
Nikhil Patil
Nikhil Patil

Reputation: 93

How to change React parent component size based on child component size without rendering child component?

I've created a React component which takes any component and renders it as a Pop-up. A parent component receives the component to be rendered (popped up). The rendered component is here the child component which using react-sizeme to get its size and pass back to parent component. The parent component must take the dimensions of child component, so adjusts' its height and width. This is the code:

class Popup extends React.Component<IPopupProps,IComponent>{
    constructor(props:IPopupProps){
        super(props);
        this.state={
            childComponent:this.props.children,
            style:{
                height:0,
                width:0
            }
        }     
    }
    
    // This function runs two times, before and after rendering child component
    // & so have an improper visualization as the size is changed twice here
    
    public OnSize = (size:any) =>{
        const width = size.width +20;
        const height =size.height+20;
        this.setState({
            style:{height,
                width             }
        })
    }

    public render(){
        return(
            <div className='popup'>
                <div style={this.state.style} className='popup-content'>
                    <a className="close" onClick={this.props.onExit}>
                            &times;
                    </a>
                    <this.state.childComponent onSize={this.OnSize}/>                    
                </div>
            </div>
        )
    }
}

The initial width and height is set to 0. So it doesn't renders properly. So is there any way so that to hide the child component or avoid its rendering before parent component gets the size?

EDIT: We can't get the size until the child component is rendered. So is there any trick to get this done. Just a component needs to be popped-up properly.

EDIT 2: Here's the PropsBuilder.tsx which calls the Popup.tsx and sends the component to display as children

class PopupBuilder extends React.Component<IPopupBuilderProps, IPopup>{
    constructor(props:IPopupBuilderProps){
        super(props);
        this.state = {
            showPopup:false
        }
    }

    public togglePopup = () =>{
        this.setState({
            showPopup:!this.state.showPopup
        })
    }

    public render (){
        return(
            <React.Fragment>

                    <button onClick={this.togglePopup}>{this.props.trigger}</button>

                    <React.Fragment>
                        {this.state.showPopup?<Popup onExit={this.togglePopup} >{this.props.component}</Popup>:null}
                    </React.Fragment>

            </React.Fragment>
            
        )
    }
}

export default PopupBuilder;

Upvotes: 1

Views: 10116

Answers (1)

Shevchenko Viktor
Shevchenko Viktor

Reputation: 5396

Actually, this looks like more general DOM/JavaScript question.

Consider such case:

const span = document.createElement('span');
span.innerText = 'hello';
span.getBoundingClientRect() // -> { width: 0, height: 0, top: 0, … }

This is an indicator that you don't know the dimensions of the element until it is in DOM (Rendered in react);

document.body.appendChild(span);
span.getBoundingClientRect(); // -> {width: 50, height: 16,  …}

My recommendation to you in this case are:

  1. Child component should accept a property (function) from Parent one
  2. Use React "ref" feature to find actual dimensions of Child element
  3. Call the function in 'componentDidMount' (use componentDidUpdate if child can change dynamically), passing it child component dimensions.

If you don't have access to child component. You may wrap it like this:

// Popup.tsx

class Popup .... {
 ...
   render() {
     <Measurer>{this.props.children}</Measurer>
   }
}

and implement the logic of fetching dimensions in it. Measurer is a direct child of Popup and their communication can be controlled by you.

Upvotes: 3

Related Questions