https://github.com/xkeshav/watch
A npm package used to debug in React application.
https://github.com/xkeshav/watch
console javascript npm npm-package react
Last synced: 12 days ago
JSON representation
A npm package used to debug in React application.
- Host: GitHub
- URL: https://github.com/xkeshav/watch
- Owner: xkeshav
- License: isc
- Created: 2024-02-13T13:12:31.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-23T17:13:18.000Z (8 months ago)
- Last Synced: 2025-04-21T06:12:43.393Z (13 days ago)
- Topics: console, javascript, npm, npm-package, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@xkeshav/watch
- Size: 484 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# @xkeshav/watch
![npm version][npm version]
![License][license]
![total download][download]
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. `` component
2. `watchThis()` method
3. `` component
## Installation
Install `@xkeshav/watch` via yarn or npm
```sh
> npm install @xkeshav/watch
```
or
```sh
> yarn install @xkeshav/watch
```
## Variations and usage
## `` component
use `` within JSX/TSX code to see the data in the console, and pass data as children
### Watch Syntax
```tsx
{whateverDataToDebug}
```
### 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
```tsx
import { useState } from 'react';
import { Watch } from '@xkeshav/watch';
export const Demo = () => {
const [date, setDate] = useState(new Date());
const setNextHour = () => {
const nextHour = date.getHours() + 1;
setDate(new Date(date.setHours(nextHour)));
};
return (
Watch Demo (see in console)
Next
Watch without any props
{{ date }}
Watch with props
{{ date }}
);
};
```
_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
```js
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
```tsx
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 (
watchThis Demo (see in console)
);
};
```
### Output
## `` component
This is another method to see output within the page, appears in a panel with show/hide button.
### WatchJson Syntax
```tsx
```
### 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
```tsx
const WatchDemo = () => {
const data = { name: "Keshav", country: "India", year: "2024" };
return (;
};
```
### Output
## License
[**ISC**](https://github.com/xkeshav/watch/blob/main/LICENSE)
## References
- [_author_](https://twitter.com/xkeshav)
- [npm home](https://www.npmjs.com/package/@xkeshav/watch)
-
[license]: https://badgen.net/npm/license/@xkeshav/watch
[npm version]: https://badgen.net/npm/v/@xkeshav/watch
[download]: https://badgen.net/npm/dt/@xkeshav/watch