Load Buy Me Coffee Script only on Desktop

[choubari]

The goal is to load this Buy Me a Coffee script only on desktop, because on mobile it take too much space with bad UX

As I was loading it in the Root Layout, which can't be a client component, I found difficulties to detect if the user is in mobile or desktop.

I checked this library react-device-detect which should work
import { isDesktop } from "react-device-detect";

There are some opened issues there about this problem with Nextjs 13 app dir...

{/* TODO: load this script only on desktop */}
   <script
            data-name="BMC-Widget"
            data-cfasync="false"
            src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
            data-id="choubari"
            data-description="Support me on Buy me a coffee!"
            data-message="Thank you for visiting my website! You may want to buy me a coffee ;)"
            data-color="#12c5ca"
            data-position="Right"
            data-x_margin="18"
            data-y_margin="18"
            // strategy="lazyOnload"
   ></script>

Either search and find a fix to have it work on the root layout, or create a nested layout, load it on specific pages...