docs: update readme and recipes (#686)

* docs: update readme and recipes

* Update Recipes.md

Author: thebuilder

README.md

@@ -123,7 +123,8 @@ const Component = () => (
 export default Component;
 ```
 
-> **Note**<br> When rendering a plain child, make sure you keep your HTML output
+> [!NOTE]
+> When rendering a plain child, make sure you keep your HTML output
 > semantic. Change the `as` to match the context, and add a `className` to style
 > the `<InView />`. The component does not support Ref Forwarding, so if you
 > need a `ref` to the HTML element, use the Render Props version instead.
@@ -138,7 +139,7 @@ Provide these as the options argument in the `useInView` hook or as props on the
 | Name                   | Type                      | Default     | Description                                                                                                                                                                                                                                                                                     |
 | ---------------------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **root**               | `Element`                 | `document`  | The Intersection Observer interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is `null`, then the bounds of the actual document viewport are used.  |
-| **rootMargin**         | `string`                  | `'0px'`     | Margin around the root. Can have values similar to the CSS margin property, e.g. `"10px 20px 30px 40px"` (top, right, bottom, left). Also supports percentages, to check if an element intersects with the center of the viewport for example `"-50% 0% -50% 0%"`.                                |
+| **rootMargin**         | `string`                  | `'0px'`     | Margin around the root. Can have values similar to the CSS margin property, e.g. `"10px 20px 30px 40px"` (top, right, bottom, left). Also supports percentages, to check if an element intersects with the center of the viewport for example `"-50% 0% -50% 0%"`.                              |
 | **threshold**          | `number` or `number[]`    | `0`         | Number between `0` and `1` indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                                                                                              |
 | **onChange**           | `(inView, entry) => void` | `undefined` | Call this function whenever the in view state changes. It will receive the `inView` boolean, alongside the current `IntersectionObserverEntry`.                                                                                                                                                 |
 | **trackVisibility** 🧪 | `boolean`                 | `false`     | A boolean indicating whether this Intersection Observer will track visibility changes on the target.                                                                                                                                                                                            |
@@ -191,7 +192,7 @@ few ideas for how you can use it.
 - [Lazy image load](docs/Recipes.md#lazy-image-load)
 - [Trigger animations](docs/Recipes.md#trigger-animations)
 - [Track impressions](docs/Recipes.md#track-impressions) _(Google Analytics, Tag
-  Manager, etc)_
+  Manager, etc.)_
 
 ## FAQ
 
@@ -489,7 +490,8 @@ const destroy = observe(element, callback, options);
 The `observe` method returns an `unobserve` function, that you must call in
 order to destroy the observer again.
 
-> **Warning**<br> You most likely won't need this, but it can be useful if you
+> [!IMPORTANT]
+> You most likely won't need this, but it can be useful if you
 > need to handle IntersectionObservers outside React, or need full control over
 > how instances are created.
 

docs/Recipes.md

@@ -25,46 +25,38 @@ build it according to your needs.
 - Either hide the `<img />` with CSS, or skip rendering it until it's inside the
   viewport.
 
-> 🔥 The example has been expanded to include support for the new native
-> `loading` attribute on images. If it's supported, we can skip the `useInView`
-> hook and render the `<img>`.
+> [!TIP]
+> All modern browsers support the native `loading` attribute on `<img />` tags, so unless you need
+> fine-grained control, you can skip the `IntersectionObserver` and use `loading="lazy"` instead.
 >
-> See https://web.dev/native-lazy-loading for details about using the `loading`
-> attribute.
->
-> [@charlietango/use-native-lazy-loading](https://www.npmjs.com/package/@charlietango/use-native-lazy-loading)
-> is a small hook that detects support for `loading` as a side effect.
+> https://web.dev/articles/browser-level-image-lazy-loading
 
 ```jsx
-import React from 'react';
-import useNativeLazyLoading from '@charlietango/use-native-lazy-loading';
-import { useInView } from 'react-intersection-observer';
+import React from "react";
+import { useInView } from "react-intersection-observer";
 
 const LazyImage = ({ width, height, src, ...rest }) => {
-  const supportsLazyLoading = useNativeLazyLoading();
   const { ref, inView } = useInView({
     triggerOnce: true,
-    rootMargin: '200px 0px',
-    skip: supportsLazyLoading !== false,
+    rootMargin: "200px 0px",
   });
 
   return (
     <div
       ref={ref}
       style={{
-        position: 'relative',
+        position: "relative",
         paddingBottom: `${(height / width) * 100}%`,
-        background: '#2a4b7a',
+        background: "#2a4b7a",
       }}
     >
-      {inView || supportsLazyLoading ? (
+      {inView ? (
         <img
           {...rest}
           src={src}
           width={width}
           height={height}
-          loading="lazy"
-          style={{ position: 'absolute', width: '100%', height: '100%' }}
+          style={{ position: "absolute", width: "100%", height: "100%" }}
         />
       ) : null}
     </div>
@@ -89,19 +81,19 @@ for an IntersectionObserver.
   have it go inwards. You can also use a percentage value, instead of pixels.
 
 ```jsx
-import React from 'react';
-import { useInView } from 'react-intersection-observer';
+import React from "react";
+import { useInView } from "react-intersection-observer";
 
 const LazyAnimation = () => {
   const { ref, inView } = useInView({
     triggerOnce: true,
-    rootMargin: '-100px 0px',
+    rootMargin: "-100px 0px",
   });
 
   return (
     <div
       ref={ref}
-      className={`transition-opacity ${inView ? 'opacity-1' : 'opacity-0'}`}
+      className={`transition-opacity ${inView ? "opacity-1" : "opacity-0"}`}
     >
       <span aria-label="Wave">👋</span>
     </div>
@@ -126,17 +118,17 @@ fire an event on your tracking service.
 - You can use the `onChange` callback to trigger the tracking.
 
 ```jsx
-import * as React from 'react';
-import { useInView } from 'react-intersection-observer';
+import * as React from "react";
+import { useInView } from "react-intersection-observer";
 
 const TrackImpression = () => {
   const { ref } = useInView({
     triggerOnce: true,
-    rootMargin: '-100px 0',
+    rootMargin: "-100px 0",
     onChange: (inView) => {
       if (inView) {
         // Fire a tracking event to your tracking service of choice.
-        dataLayer.push('Section shown'); // Here's a GTM dataLayer push
+        dataLayer.push("Section shown"); // Here's a GTM dataLayer push
       }
     },
   });