# react-debugger-hook

> A hook that easily injects values to react apps, via debugging console.

Latest version **1.3.2** (published 2021-09-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-debugger-hook
pnpm add react-debugger-hook
yarn add react-debugger-hook
bun add react-debugger-hook
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2021-09-25 |
| First published | 2021-09-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 48.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | gianmarco.ferrara@gmail.com |
| Maintainers | gferrara |
| Keywords | debugger, hooks |

## Links

- npm: https://www.npmjs.com/package/react-debugger-hook
- Repository: https://github.com/GiovanniFerrara/react-debugger-hook
- Homepage: https://github.com/GiovanniFerrara/react-debugger-hook#readme
- Issues: https://github.com/GiovanniFerrara/react-debugger-hook/issues
- npm.io page: https://npm.io/package/react-debugger-hook

## Alternatives

- [cli-color](https://npm.io/package/cli-color.md) — 3.4M weekly downloads
- [log](https://npm.io/package/log.md) — 1.3M weekly downloads
- [logstash-client](https://npm.io/package/logstash-client.md) — 4.5K weekly downloads
- [@nocobase/plugin-logger](https://npm.io/package/@nocobase/plugin-logger.md) — 2.0K weekly downloads
- [child-process-debug](https://npm.io/package/child-process-debug.md) — 695 weekly downloads

## Recent versions

- 1.3.2 (latest) — 2021-09-25
- 1.3.1 — 2021-09-25
- 1.3.0 — 2021-09-24
- 1.2.0 — 2021-09-24
- 1.1.0 — 2021-09-24
- 1.0.0 — 2021-09-24

## README

# react-debugger-hook
A hook that easily injects values to react apps through a user friendly console.

Live example: https://react-debugger-hook.netlify.app

This is designed for those who want to review a react project, being able to interact with things like: colors, styles, animations settings, run the app in different mode, and more...
React-debugger-hook allows you to have an easy to use console where the reviewer can input values (text, colors, ...) directly into your app.

## Install

```bash
npm i -S react-debugger-hook
```

## Usage
In this example, just by initializing these two variables, an "Open" button on the left side of the screen will be shown. 

When you click on that button, an input console on right side will be opened. There the reviewer can inject those values directly into your react app.

```js
// src/App.js
import { ReactDebuggerProvider, ReactDebuggerConsole } from 'react-debugger-hook'
import ComponentToDebug from './ComponentToDebug';

function App() {
   return (
    <ReactDebuggerProvider>
      {process.env.NODE_ENV !== 'production' && <ReactDebuggerConsole />}
          <ComponentToDebug />
    </ReactDebuggerProvider>
  );
}

export default App;

```

```js
// src/ComponentToDebug
import { useDebuggerHook } from 'react-debugger-hook'

const ComponentToDebug = () => {
  const color = useDebuggerHook('color', '#fff')
  const yourName = useDebuggerHook('Your name', 'John')

  return (
    <div style={{color}}>
    {`Hello from ${yourName}`}
  </div>)
}

export default ComponentToDebug
```

## API

#### useDebuggerHook

```js
import { useDebuggerHook } from 'react-debugger-hook'

const ComponentToDebug = () => {
  const currentValue = useDebuggerHook(key, initialValue)

  return (
    <div>
    {currentValue}
  </div>)
}

```
```
currentValue: String | the value that can be injected and changed through the console.

key: String | the name of the property to change, this is shown into the console. Choosing a meaningful name is recommended.

initialValue: String | the initial value.
```

#### ReactDebuggerProvider, ReactDebuggerConsole

```js
import { ReactDebuggerProvider, ReactDebuggerConsole } from 'react-debugger-hook'
import ComponentToDebug from './ComponentToDebug';

function App() {
   return (
    <ReactDebuggerProvider>
      <ReactDebuggerConsole />
      <ComponentToDebug />
    </ReactDebuggerProvider>
  );
}

```
```
ReactDebuggerConsole: ReactComponent | renders the console.

ReactDebuggerProvider: ReactComponent | Provides the context consumed by the hook.
```
## License

[MIT](http://vjpr.mit-license.org)

---
_Source: https://npm.io/package/react-debugger-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._