Bug fixes

When using @loadable/components, the usage of the fallback loader has changed. This build accommodates the new method of providing a loader.

It also has a bug fix for how elements are unobserved by the IntersectionObserver.

As always, please report any issues with a reproducible case to help with debugging. CodeSandbox is great for this! 🙏🏽

Upgrade all the things

See PR #23 for the code changes of this release

The following changes are part of this release:

• Utilize @loadable/components as part of their name change.
• Upgrade react peer dependency to >=16.8.6.
• Rewrite loadable component to use Hooks. Previously we were bringing in a class properties Babel transform, however now we don't need it as we don't use classes internally!
• Refactor all tests using @testing-library/react. We rely on mocks less now so the test suite should be a good indication of what works.
• Switch primary export to @loadable/components. react-loadable is reportedly not as maintained as @loadable/components, thus we'd recommend @loadable/components as the primary backing for this library as long as you aren't using the Suspense/React.lazy option.

Please report any issues that you are seeing.

Thanks!

Detect intersection by both `isIntersecting` and `intersectionRatio`

Previously we were only looking at the intersectionRatio being greater than 0 to detect an intersection. Now we also look at the isIntersecting property with a fallback to intersectionRatio > 0 in browsers that don't have the isIntersecting property.

Thanks to @Zubrolet for adding this and have a look at #19 for more information 👏

SSR Memory Leak Fix

As described in #11, when using componentWillMount to set up visibility handlers, it would create a leak in server-side environments where componentWillUnmount is not called to clean up the handler.

This release uses componentDidMount to set up the handlers, such that it is also not called on the server to be cleaned up.

Thanks to @the83 for identifying the problem and for the fix! 🎉

Fix for Microsoft Edge

Microsoft Edge requires a width and height on elements for the IntersectionObserver to detect them. This release fixes an issue where those properties were not set by default.

Better SSR resilience

Checks that window is undefined for some SSR environments.

Pass down the `className` prop

In addition to having a default style of the containing box of display: inline-block, you're now also able to pass down a className for the containing box.

Fix bug with multiple tracked elements on a page

v2.3.0

Fix bug with overlapping trackedElement key and bump version

Wrapping span is an inline-block

v2.2.0

Tweak ignored files and bump version

Cleanup imports

Cleanup import syntax from import LoadableVisibility from 'react-loadable-visibility/lib/react-loadable' to import LoadableVisibility from 'react-loadable-visibility/react-loadable', and same for loadable-components.