# redux-devtools-bubbles-monitor

> Toastr notifications of redux actions

Latest version **0.1.1** (published 2016-03-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-devtools-bubbles-monitor
pnpm add redux-devtools-bubbles-monitor
yarn add redux-devtools-bubbles-monitor
bun add redux-devtools-bubbles-monitor
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2016-03-15 |
| First published | 2015-11-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 37 |
| Author | Edwin Knuth |
| Maintainers | eknuth |
| Keywords | redux, devtools, flux, react, hot reloading, time travel, live edit |

## Links

- npm: https://www.npmjs.com/package/redux-devtools-bubbles-monitor
- Repository: https://github.com/eknuth/redux-devtools-bubbles-monitor
- Issues: https://github.com/eknuth/redux-devtools-bubbles-monitor/issues
- npm.io page: https://npm.io/package/redux-devtools-bubbles-monitor

## Dependencies (4)

- [jquery](https://npm.io/package/jquery.md) ^2.1.4
- [toastr](https://npm.io/package/toastr.md) ^2.1.2
- [react-pure-render](https://npm.io/package/react-pure-render.md) ^1.0.2
- [flux-standard-action](https://npm.io/package/flux-standard-action.md) ^0.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2016-03-15
- 0.1.0 — 2016-03-15
- 0.0.16 — 2015-11-09
- 0.0.13 — 2015-11-07
- 0.0.12 — 2015-11-07
- 0.0.11 — 2015-11-05
- 0.0.10 — 2015-11-05
- 0.0.9 — 2015-11-05
- 0.0.8 — 2015-11-04
- 0.0.7 — 2015-11-04
- 0.0.6 — 2015-11-04
- 0.0.5 — 2015-11-04

## README

Redux DevTools Log Monitor
=========================

An unobtrusive monitor for [Redux DevTools](https://github.com/gaearon/redux-devtools). Depends on toastr and jquery (sorry, it was easy!)

[Monitor Demo](http://eknuth.github.io/redux-devtools-bubbles-monitor/)

## Behavior
Redux actions are displayed as they are dispacted. The type of the action is shown along with the payload and other properties of the action. If an object is nested, only the top level keys are shown.

### Types of notifications
[Error actions](https://github.com/acdlite/flux-standard-action#errors-as-a-first-class-concept) are shown as red alert notifications. Redux internal actions, including those from [redux router](https://github.com/rackt/redux-router) are shown as blue info notifications.

### Flux standard actions
A warning is shown if the action does not match the [flux standard action](https://github.com/acdlite/flux-standard-action) specification.

![](http://imgur.com/KSxngwN.gif)

## Setup
### NPM
Install the npm module.
```
npm install --save-dev redux-devtools-bubbles-monitor
```
Include the component with the usual DevTools setup.
### JSX
The monitor respects the state of visibleOnLoad from the DevTools component props. If visibleOnLoad is true, notifications will appear when the DebugPanel component is mounted. <strong>Ctrl-h</strong> will toggle the notification state of the monitor.
```javascript
import BubblesMonitor from 'redux-devtools-bubbles-monitor'
// requires webpack css loader or just include from cdn
require('redux-devtools-bubbles-monitor/lib/toastr.min.css')
<DebugPanel top right bottom>
  <DevTools store={store}
            monitor={BubblesMonitor}
            visibleOnLoad={true} />
</DebugPanel>

```
### CSS
If you aren't using the webpack css loader you can include the css for toastr from cdn.
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
```
### License

MIT

---
_Source: https://npm.io/package/redux-devtools-bubbles-monitor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._