Export multiple components

[hadeeb]

Consider exporting multiple components for different hydration strategies as opposed to a single component controlled with props.

Pros

• Smaller size (assuming an app does not need/use all these strategies).
• Opens up possibilities to further enhance/customise each strategy(like Support rootMargin on intersectionObserver #13)

Cons

[ScriptedAlchemy]

Would you consider this PR #15 in the interim?

[GeorgeTaveras1231]

@hadeeb An idea:

The current API is limited to low-level browser events which work well for many cases, but in some cases it will be helpful to hydrate when some specific application state changes, or you may want to bind the act of hydration to an event bound to an element outside of the lazy-hydrated tree.

It may be good to extract the core behavior into its own component. This core behavior will allow consumers to have fine control over the hydrate strategy (based on their specific application state).

<LazyHydrateCore hydrate={true || false}> 
  {/* children */}
</LazyHydrateCore>

Example addressing scenario I mentioned above -- want to hydrate when user clicks on button in separate sub-tree :

const [someState, setSomeState] = React.useState(false);

<>
<button onClick={() => setSomeState(true)}>Click here</button>
<div>
  <LazyHydrate hydrate={someState}
    <ExpensiveComponent />
  </LazyHydrate>
</div>