app-tracking-npm-package
Advanced tools
Track and visualize Next.js components, props, and state for the SPS Canvas tool
A lightweight library that enables tracking React component state, props, and render behavior in Next.js applications for visualization in the SPS Canvas tool.
npm install --save app-tracking-npm-package
# or
yarn add app-tracking-npm-package
Add the tracker to your root layout:
// app/layout.js
'use client';
import { initTracker } from 'app-tracking-npm-package';
import { useEffect } from 'react';
export default function RootLayout({ children }) {
useEffect(() => {
if (typeof window !== 'undefined') {
initTracker();
}
}, []);
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Add the tracker to your _app.js file:
// pages/_app.js
import { initTracker } from 'app-tracking-npm-package';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
useEffect(() => {
if (typeof window !== 'undefined') {
initTracker();
}
}, []);
return <Component {...pageProps} />;
}
export default MyApp;
You can enhance your components with tracking capabilities using the withTracking HOC:
import { withTracking } from 'app-tracking-npm-package';
function Button({ onClick, children }) {
return (
<button
onClick={onClick}
className="px-4 py-2 bg-blue-600 text-white rounded"
>
{children}
</button>
);
}
// Export with tracking - second parameter is the component name for the canvas
export default withTracking(Button, 'Button');
Use the useTrackedState hook to automatically track state changes:
import { useTrackedState } from 'app-tracking-npm-package';
function Counter() {
// Works just like useState but reports state changes to the Canvas
const [count, setCount] = useTrackedState(0, 'Counter');
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
npm run dev)http://localhost:3000)The Canvas will automatically:
initTracker()Initializes the tracker and connects to the Canvas tool when available.
withTracking(Component, displayName)Higher-Order Component that wraps your React component to track renders and props.
Component: The React component to trackdisplayName: (Optional) Name to display in the Canvas (defaults to component name)useTrackedState(initialState, componentName)A drop-in replacement for React's useState that tracks state changes.
initialState: Initial state value (same as useState)componentName: Name of the component using this statetrackComponent(componentName, props, state)Low-level function to manually track component data.
componentName: Name of the component to trackprops: Component props objectstate: Component state objectFAQs
Track and visualize Next.js components, props, and state for the SPS Canvas tool
We found that app-tracking-npm-package demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.