Add `render` prop as part of API

[tstirrat15]

trafficstars

Fixes #222

Motivation

See #222. When you add a component to the render tree, even if the parent JSX element chooses not to render the child, the child is still mounted, which in some cases may be less than ideal. Using a render prop that only executes when the conditions are met is one way to sidestep this.

Another approach would be to use a children function that calls with the lazyload state of the component, which would let you do something like this:

<LazyLoad>
  {matches => (
    matches
    ? <Foo />
    : <Bar />
  )}
</LazyLoad>

Which would give the same benefits as a render prop while simultaneously giving you more control over how the children are rendered. This could be left for future work, though. If you're interested, react-media is a component that works this way.

Changes

• Add indent rules to .editorconfig
• Add a means to spy on whether the Test component has mounted
• Write tests that get at the ideas I'm referencing in #222
• Write a render prop API into the lazyload component

[tstirrat15]

:thinking:

In retrospect, I'm surprised that the tests work this way. I would have thought that the Test component's constructor would have been called when it wasn't rendered, but not its componentDidMount. I'm not entirely sure that the tests are testing what I think they're testing.

[ameerthehacker]

@tstirrat15 I will have a look at the PR thanks!

[ameerthehacker]

@tstirrat15 it looks great! can you please verify that the tests are as you expected!

[tstirrat15]

I went back to look at this, and in the 5 months since the last time I looked at it, I can't remember what my concerns were.

The other problem is that I can't tell that tests are executing successfully on my local. When I run yarn test, a browser window pops up, and it goes through some tests, but then the browser goes idle and the test runner seems to hang. Is that the behavior that you're seeing as well, or is that only on my local?