Improve tab rendering perfomance

[HaNdTriX]

react-draggable-tab hides a tab by setting its height: 0.
This means, that the contents of each tab need to be resized every time the tab is selected.
This may cause the view engine to render the selected tab very slowly.

Solution 1:

Switch to absolute hiding

// Hide
left: -9999999px;

// Show
left: 0;

Solution 2:

Let the user configure the hiding styles via props

[aleksandrenko]

Why can't you just use display: none;?

[georgeOsdDev]

I added hiddenConteinerStyle 5084ea5
User now can use any hidden style.

When you use left: -9999999px it cause unexpected scrollbar and space when after tab is selected.
Any good idea??

[georgeOsdDev]

PS: display: none; cause browser re-flow.

http://stackoverflow.com/questions/11757016/performance-differences-between-visibilityhidden-and-displaynone

So I think it costs as same as height: 0

[HaNdTriX]

@georgeOsdDev Awesome! Thanks a lot!

[georgeOsdDev]

v0.7.0 is now available on NPM!
https://github.com/georgeOsdDev/react-draggable-tab/releases/tag/v0.7.0