Need to import react-scan into next.js as an npm package

[Traveller23]

Currently, I can load it via URL and it works fine, but not via npm package.
The best I can do is get the hover bar to appear, but there is no animation that prompts for a re-render after the component is re-rendered.

Related issue: #82

[pivanov]

Check this one nextjs-react-scan
Hope will help you :)

[Traveller23]

Check this one nextjs-react-scan Hope will help you :)

I did exactly what you do, but I still only see the hover bar, and can't notice any re-rendering events.

This is my console log:

Environment: next.js 14.2.21, app router.

By the way, I also import React in my layout.tsx, but it's a server-side page, so I can't use react-scan.

[gruckion]

Check this one nextjs-react-scan Hope will help you :)

Can you get this added to the front page readme.

Or better yet maybe have a;

import { ReactScan } from "react-scan";

So we can just import and use;

"use client";

import { useEffect } from "react";
import { scan } from "react-scan";

type Options = Parameters<typeof scan>[0];

export function ReactScan({ options }: { options: Options }) {
  useEffect(() => {
    scan({
      ...options,
      enabled: true,
      log: true
    });
  }, [options]);

  return null;
}

Also the Options interface is not exported so we can't access the type.

[AlexBThomsen]

Same for me. I do see the following on localhost but nothing about re-renders or anything insightful.