@xkeshav/watch

A developer friendly utility to watch data/variable runtime which help to debug React code fast( in console or within page)

This npm package comes with three variation to debug data within react application on runtime and async data

1. <Watch> component
2. watchThis() method
3. <WatchJson> component

Installation

Install @xkeshav/watch via yarn or npm

> npm install @xkeshav/watch

or

> yarn install @xkeshav/watch

Variations and usage

<Watch> component

use <Watch> within JSX/TSX code to see the data in the console, and pass data as children

Watch Syntax

<Watch>{whateverDataToDebug}</Watch>

props (optional)

name	type	default	description
from	string	👀	additional information to display in console
kind	string	"log"	console method such as table dir warn error info trace

Example

import { useState } from 'react';
import { Watch } from '@xkeshav/watch';

export const Demo = () => {
  const [date, setDate] = useState<Date>(new Date());
  const setNextHour = () => {
    const nextHour = date.getHours() + 1;
    setDate(new Date(date.setHours(nextHour)));
  };

  return (
    <div>
      <h1>Watch Demo (see in console)</h1>
      <button onClick={setNextHour}>Next</button>
      <p>Watch without any props</p> <Watch>{{ date }}</Watch>
      <hr />
      <p>Watch with props</p>
      <Watch from="Demo Component" kind="dir">
        {{ date }}
      </Watch>
    </div>
  );
};

Note: using object shorthand property within Watch for better readability.

Output

---

watchThis() method

use watchThis() method can be used in react component and it display data in the console.

watchThis Syntax

watchThis(whatToDebug);
watchThis(whatToDebug, "from filename", "info);
watchThis(whatToDebug, "additional details");

Parameters (optional)

name	type	default	description
what	string	''	pass data which need to display in console
from	string	👇	additional information; this become title on console group
kind	string	"log"	console method such as table dir warn ,error info trace

Example

import { watchThis } from '@xkeshav/watch';

export const Demo = () => {
  const today = new Date();
  const system = { name: 'Windows', version: '11', release: '2023' };
  watchThis({ today });
  watchThis({ system }, 'Label', 'info');
  return (
    <div>
      <h1>watchThis Demo (see in console)</h1>
    </div>
  );
};

Output

<WatchJson /> component

This is another method to see output within the page, appears in a panel with show/hide button.

WatchJson Syntax

<WatchJson data={whatever} what={'some Title'} />

Props (optional)

name	type	default	description
what	string	''	this will be displayed as title of panel

Note: we can pass as many as props to WatchJson (of any type )

Example

const WatchDemo = () => {
  const data = { name: "Keshav", country: "India", year: "2024" };
  return (<WatchJson what="Watch" data={data} date={new Date()} />;
};

Output

License

MIT

References

• author
• npm home