TextTruncate on initially hidden element

[solace]

Hi,

I'm using TextTruncate in tabbed panels (bootstrap), which results in the components on initially hidden tabs to not have rendered when the tab is made visible. But it redraws when I resize the window.

Can you recommend a way to trigger redraw for this component when its container is made visible?

Thanks

[ShinyChang]

@solace

Currently have no robust way to do this.

But, you can manually call onResize to trigger redraw .

Here is sample code:

import React, { Component } from 'react';
import TextTruncate from 'react-text-truncate';

export default class App extends Component {
    componentDidMount() {
        this.refs.d.style.display = 'block';
        this.refs.t.onResize();
    }

    render() {
        return (
            <div ref="d" style={{display: "none"}}>
                <TextTruncate ref="t" text="Lorem Ipsum is simply dummy text of the printing and typesetting industry...."/>
            </div>
        );
    }
}

[solace]

The tab content is built from a reactive data source, so I managed to trigger the redraw by toggling a flag on the data when the active tab changed.

Thank you for the alternate solution as well.