react-box
v2.0.0
Published
Wraps repeatedly rerendered components preserving their nodes in real DOM to reduce paints
Downloads
19
Readme
React Box
Wraps repeatedly rerendered components preserving their nodes in real DOM to reduce paints. The idea is borrowed from Noscript framework, where box is a container for views that manages visibility of active views instead of taking irrelevant nodes out of DOM.
Installation
npm install react-box
Usage
Wrap your content into Box
element, and make sure that children of different classes have distinct keys:
render: function() {
var content;
if (this.props.mode === 'map') {
content = <Map key='map' />;
} else {
content = <Post key='post' id={ this.props.id } />
}
return <Box>{ content }</Box>;
}
This example will result in the following HTML structure:
<!-- Initial render: <Content mode='map' /> -->
<div>
<div style="display: block;">
<div class="map"><!-- … --></div>
</div>
</div>
<!-- First update: <Content mode='post' id='1' /> -->
<div>
<div style="display: none;">
<div class="map"><!-- … --></div>
</div>
<div style="display: block;">
<div class="post">
<h1>Post ID: 1</h1>
<!-- … -->
</div>
</div>
</div>
<!-- Second update: <Content mode='post' id='2' /> -->
<div>
<div style="display: none;">
<div class="map"><!-- … --></div>
</div>
<div style="display: none;">
<div class="post">
<h1>Post ID: 1</h1>
<!-- … -->
</div>
</div>
<div style="display: block;">
<div class="post">
<h1>Post ID: 2</h1>
<!-- … -->
</div>
</div>
</div>
<!-- Third update: <Content mode='post' id='2' /> -->
<div>
<div style="display: block;">
<div class="map"><!-- … --></div>
</div>
<div style="display: none;">
<div class="post">
<h1>Post ID: 1</h1>
<!-- … -->
</div>
</div>
<div style="display: none;">
<div class="post">
<h1>Post ID: 2</h1>
<!-- … -->
</div>
</div>
</div>