Remove style and className, and monitor children instead

[gaearon]

This addresses #12.

Instead of having the component always render its own div, monitor whatever passed to its children (and use a single <span> as the default child):

// No magic <div>s now, all markup is controlled by you!
<VisibilityMonitor>
  <div className='whatever' />
</VisibilityMonitor>

// The old way still works though: by default, it renders <span>
<VisibilityMonitor />

This changes the public API:

• removes className
• removes style
• allows to pass a single child for monitoring

I also took the liberty to rename component to element in tests because that matches the current React terminology. I'm happy to roll that back if you don't like it.

[gaearon]

Note: I couldn't figure out how to build the example (I keep getting build errors) so I didn't check if it works. Tests are passing.

[joshwnj]

@gaearon thanks! Didn't know about React.Children.only until now :)

I'm happy with those naming changes as well, I agree there's value in consistency with React terminology.

Btw could you please open a new issue with build errors from the example?

[joshwnj]

sorry about that @kof ! I'll be more careful with the versioning next time.

I've created a v1.x branch and republished v1.8.0 which is pre-breaking-change, so please upgrade to that. I'll continue to maintain v1.x for now with bugfixes, but I'd like to figure out if there's a way to converge. I'll create a new issue to discuss that and get ideas.

@gaearon v2.0.0 has the new changes from this PR.