https://github.com/sergiodxa/use-log
Log a state or prop every time it changes
https://github.com/sergiodxa/use-log
hooks logger logging react react-hooks
Last synced: about 1 year ago
JSON representation
Log a state or prop every time it changes
- Host: GitHub
- URL: https://github.com/sergiodxa/use-log
- Owner: sergiodxa
- License: mit
- Created: 2020-06-30T18:14:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T19:39:43.000Z (over 3 years ago)
- Last Synced: 2025-03-28T20:46:08.752Z (about 1 year ago)
- Topics: hooks, logger, logging, react, react-hooks
- Language: TypeScript
- Homepage:
- Size: 1.48 MB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# useLog  
> Log a state or prop every time it changes
## Usage
Install it:
```sh
$ yarn add use-log
```
Import it:
```ts
import useLog from 'use-log';
```
Use it:
```ts
function MyComponent() {
const [value, setValue]= React.useState("")
useLog(`The value is ${value}`);
return setValue(event.target.value)}>
}
```
Now you will get a log with `The value is ${value}` everytime the message change, this will happen everytime the value change.
### Log objects or arrays
When using it with an object or array as value to log you may want to memoize it to avoid the log running on every render:
```ts
function MyComponent() {
const [value, setValue]= React.useState("")
useLog(React.useMemo(() => ({ value }), [value]));
return setValue(event.target.value)}>
}
```
### Configuration
useLog receives an optional configuration object as second argument with the following interface:
```js
interface Config {
level?: 'log' | 'info' | 'warn' | 'error' | 'debug' | 'dir' | 'table';
shouldLogInProduction?: boolean;
}
```
### Changing the log level
You can change the log level this way:
```ts
function MyComponent() {
const [value, setValue]= React.useState("")
useLog(`The value is ${value}`, { level: "debug" });
return setValue(event.target.value)}>
}
```
This will basically change the `console` method useLog is calling.
### Production-safe
You can keep the hook in your code and the code will do nothing in production by default, if you want to enable it in production environments you can set `shouldLogInProduction` to `true`.
```ts
function MyComponent() {
const [value, setValue]= React.useState("")
useLog(`The value is ${value}`, { shouldLogInProduction: true });
return setValue(event.target.value)}>
}
```
This way the log will continue working in production.
## Author
- [Sergio XalambrÃ](https://sergiodxa.com) - [Able](https://able.co)
## License
The MIT License.