88React implementation of the
99[ Intersection Observer API] ( https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API )
1010to tell you when an element enters or leaves the viewport. Contains both a
11- [ Hooks] ( #hooks- ) , [ render props] ( #render-props ) and
11+ [ Hooks] ( #useinview-hook ) , [ render props] ( #render-props ) and
1212[ plain children] ( #plain-children ) implementation.
1313
1414** Storybook Demo:**
@@ -135,11 +135,10 @@ export default Component;
135135
136136[ ![ Edit InView plain children] ( https://codesandbox.io/static/img/play-codesandbox.svg )] ( https://codesandbox.io/s/inview-plain-children-vv51y?fontsize=14&hidenavigation=1&theme=dark )
137137
138- > ** Note** <br >
139- > When rendering a plain child, make sure you keep your HTML output semantic.
140- > Change the ` as ` to match the context, and add a ` className ` to style the
141- > ` <InView /> ` . The component does not support Ref Forwarding, so if you need a
142- > ` ref ` to the HTML element, use the Render Props version instead.
138+ > ** Note** <br > When rendering a plain child, make sure you keep your HTML output
139+ > semantic. Change the ` as ` to match the context, and add a ` className ` to style
140+ > the ` <InView /> ` . The component does not support Ref Forwarding, so if you
141+ > need a ` ref ` to the HTML element, use the Render Props version instead.
143142
144143## API
145144
@@ -300,8 +299,8 @@ afterEach(() => {
300299});
301300` ` `
302301
303- You only need to do this if the test environment does not support
304- ` beforeEach ` globally, alongside either ` jest .fn ` or ` vi .fn ` .
302+ You only need to do this if the test environment does not support ` beforeEach `
303+ globally, alongside either ` jest .fn ` or ` vi .fn ` .
305304
306305#### Other Testing Libraries
307306
@@ -464,9 +463,9 @@ import 'intersection-observer';
464463` ` `
465464
466465If you are using Webpack (or similar) you could use
467- [dynamic imports](https://webpack.js.org/api/module-methods/#import-), to load
468- the Polyfill only if needed. A basic implementation could look something like
469- this:
466+ [dynamic imports](https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import),
467+ to load the Polyfill only if needed. A basic implementation could look something
468+ like this:
470469
471470` ` ` js
472471/**
@@ -500,10 +499,9 @@ const destroy = observe(element, callback, options);
500499The ` observe` method returns an ` unobserve` function, that you must call in
501500order to destroy the observer again.
502501
503- > **Warning**<br>
504- > You most likely won't need this, but it can be useful if you need to handle
505- > IntersectionObservers outside React, or need full control over how instances
506- > are created.
502+ > **Warning**<br> You most likely won't need this, but it can be useful if you
503+ > need to handle IntersectionObservers outside React, or need full control over
504+ > how instances are created.
507505
508506[package-url]: https://npmjs.org/package/react-intersection-observer
509507[npm-version-svg]: https://img.shields.io/npm/v/react-intersection-observer.svg
@@ -521,4 +519,4 @@ order to destroy the observer again.
521519[test-url]:
522520 https://github.com/thebuilder/react-intersection-observer/actions?query=workflow%3ATest
523521[test-utils-url]:
524- https://github.com/thebuilder/react-intersection-observer/blob/feat/vitest /src/test-utils.ts
522+ https://github.com/thebuilder/react-intersection-observer/blob/master /src/test-utils.ts
0 commit comments