render-on-demand

React component that returns children once after DOM render request.

Puppeteer tests @ specs/index.spec.ts

Example

Source

<style>{`
  input:not(:checked) ~ * {
    display: none;
  }
`}</style>
<input type="checkbox"/>
<RenderOnDemand>
  <div className="child">a</div>
  <div className="child">b</div>
</RenderOnDemand>

.child will not appear in DOM until input is checked for the first time.

<style>
  input:not(:checked) ~ * {
    display: none;
  }
</style> 
<input type="checkbox">
<div></div>