# reactotron

> A console-based remote control for React and React Native.

Latest version **0.9.0** (published 2016-08-09) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install reactotron
pnpm add reactotron
yarn add reactotron
bun add reactotron
```

Provides the command `reactotron`.

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.9.0 |
| Published | 2016-08-09 |
| First published | 2016-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 15593 |
| Author | Steve Kellock |
| Maintainers | skellock |

## Links

- npm: https://www.npmjs.com/package/reactotron
- Repository: https://github.com/skellock/reactotron
- Homepage: https://github.com/skellock/reactotron#readme
- Issues: https://github.com/skellock/reactotron/issues
- npm.io page: https://npm.io/package/reactotron

## Dependencies (8)

- [ramda](https://npm.io/package/ramda.md) ^0.21.0
- [gemoji](https://npm.io/package/gemoji.md) ^1.0.0
- [moment](https://npm.io/package/moment.md) ^2.12.0
- [strman](https://npm.io/package/strman.md) ^1.0.1
- [blessed](https://npm.io/package/blessed.md) ^0.1.81
- [socket.io](https://npm.io/package/socket.io.md) ^1.4.5
- [ramdasauce](https://npm.io/package/ramdasauce.md) ^1.0.0
- [socket.io-client](https://npm.io/package/socket.io-client.md) ^1.4.5

## Recent versions

- 0.9.0 (latest) — 2016-08-09
- 0.8.0 — 2016-07-30
- 0.7.0 — 2016-07-15
- 0.6.1 — 2016-04-27
- 0.6.0 — 2016-04-24
- 0.5.0 — 2016-04-24
- 0.4.0 — 2016-04-23
- 0.3.0 — 2016-04-22
- 0.2.0 — 2016-04-21
- 0.1.0 — 2016-04-20

## README

# Reactotron

[![Join the chat at https://gitter.im/reactotron/reactotron](https://badges.gitter.im/reactotron/reactotron.svg)](https://gitter.im/reactotron/reactotron?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

[![npm module](https://badge.fury.io/js/reactotron.svg)](https://www.npmjs.org/package/reactotron)

Control, monitor, and instrument your React DOM and React Native apps.  From the comfort of your TTY.

[What's New](CHANGES.md)

<img src='./images/Reactotron.gif' alt="Demo" />

<img src='./images/0.6.0.png' alt="Version 0.6.0" />

### Platforms Supported

* React Native 0.23+
* React DOM 15+
* [React Native Web](https://github.com/necolas/react-native-web) 0.0.15+

### Great For

* sending logging commands as text or objects
* relaying all redbox errors and yellowbox warnings
* watching the flow of actions as they get dispatched
* tracking performance of each action watching for hotspots
* querying your global state like a database
* subscribing to values in your state and be notified when they change
* dispatching your custom actions
* watching your HTTP calls to servers and track timing

# Requirements

* Node 4.x+
* Abnormal love for all things console


# Installing

`npm install reactotron --save-dev`


# Running The Server

`node_modules/.bin/reactotron`

Might be worth creating an alias or adding it to your script section of your `package.json`.

# How To Use

To use this, you need to add a few lines of code to your app.

Depending on how much support you'd like, there's a few different places you'll want to hook in.

### Entry Point (required)

##### Provides

* sending logging commands as text or objects
* relaying all redbox errors and yellowbox warnings

<img src='./images/Yellowbox.png' alt="Hello!" />

##### How To Hook

If you have `index.ios.js` or `index.android.js`, you can place this code somewhere near the top:

```js
import Reactotron from 'reactotron'

// connect with defaults
Reactotron.connect()

// Connect with options

const options = {
  name: 'React Web', // Display name of the client
  server: 'localhost', // IP of the server to connect to
  port: 3334, // Port of the server to connect to (default: 3334)
  enabled: true, // Whether or not Reactotron should be enabled.
  secure: false, // Are you piggybacking on HTTP or HTTPS (default: false)
}

Reactotron.connect(options)
```

I'd recommend using the following for connect in React Native so that release builds will disable reactotron.

```js
Reactotron.connect({enabled: __DEV__})
```

##### Ensure `connect()` Happens First

It is important that your `Reactotron.connect()` happens before your redux store gets created.  Especially
if you're using the `{enabled: false}` option.

To make this happen, you can create a `ReactotronConfig.js` file and `import` that as your first import in
the entry point of your application.  Check out the 3 projects under `examples` to see that in action.


### Redux Middleware (optional)

<img src='./images/ReduxActions.png' alt="Hello!" />

##### Provides

* watching the flow of actions as they get dispatched
* tracking performance of each action watching for hotspots

##### Hook To Hook

```js
// wherever you create your Redux store, add the Reactotron middleware:

import Reactotron from 'reactotron'

const store = createStore(
  rootReducer,
  applyMiddleware(
    logger,
    Reactotron.reduxMiddleware // <--- here i am!
  )
)

// Or you can use the Reactotron storeEnhancer!

const enhancer = compose(
  // If you have other enhancers..
  Reactotron.storeEnhancer()
)

const store = createStore(
  rootReducer,
  initialState,
  enhancer
)

```

### Redux Store (optional)

<img src='./images/ReduxSubscriptions.png' alt="Hello!" />

##### Provides

* querying your global state like a database
* subscribing to values in your state and be notified when they change
* dispatching your custom actions

##### How To Hook

```js
// wherever you create your Redux store
import Reactotron from 'reactotron'

const store = createStore(...)  // however you create your store
Reactotron.addReduxStore(store) // <--- here i am!

// If you're using the Reactotron.storeEnhance(), it's already
// setup for you!
```

### API Tracking (optional)

<img src='./images/Api.png' alt="Hello!" />

##### Provides

* watching your HTTP calls to servers and track timing
* currently supports [apisauce](https://github.com/skellock/apisauce)

##### How To Hook

```js
// wherever you create your API
import Reactotron from 'reactotron'

// with your existing api object, add a monitor
api.addMonitor(Reactotron.apiLog)
```

# Other Features

##### Log

Call `Reactotron.log()` and pass a string or object to have it log.  Emojis are supported.

##### Bench

You can use Reactotron for unscientific benchmarks.

```javascript
  const bench = Reactotron.bench('Here I Go')
  bench.stop()
```

You can also register steps if you're timing a sequence.
```javascript
  const bench = Reactotron.bench('Lets Go')
  bench.step('After long operation')
  bench.step('After one more thing')
  bench.stop()
```

# Tips

##### Using On A Device

When you initialize the `reactotron` you can tell it the server location when you connect:

`Reactotron.connect({server: '10.0.1.109'})`

##### Useful shortcuts

You can clear your reactotron by hitting backspace/delete OR you can insert a separator by pressing the "-" key.

For some commands, like dispatching an action, you can repeat previous by pressing the "." key.


# Getting Involved

PRs and bug reports are welcome!

You want to start extending this?

### Run the console program

```
cd src
npm install
npm start
```

### Pick an example app and run it

```
cd examples/ReactNativeExample
npm install
cp ../../src/client/client.js .
react-native run-ios
```

Then hack around.  Hack around.  Hack up hack up and hack down.

Be sure to read the silly `examples/README.md` file for more details.


# Wishlist

* [ ] Get the vocab right (current everything is a "command")
* [ ] Refactor clients to organize commands
* [ ] Allow commands to be extended on client & server
* [ ] Allow a .reactotron sub-folder for project-specific things
* [ ] Does router need to exist anymore?
* [ ] Api size metrics
* [ ] Pages for logging
* [ ] Show what the profile shows
* [ ] Track saga effect chains
* [ ] Provide a way to drive the navigator
* [ ] Allow simple scripts to be written that send commands
* [ ] Strategy for dealing with multiple apps connecting

# Random Pics

<img src='./images/AllThreePlatforms.png' alt="Hello!" />

<img src='./images/MainInterface.png' alt="Hello!" />

<img src='./images/Dispatch.png' alt="Hello!" />

# Special Thanks

A shout out to my teammates at [Infinite Red](https://infinite.red) who encourage this type of open-source hacking & sharing.

[<img src='https://infinite.red/images/ir-logo-7ebf9ed9d02e2805bb2c94309efa5176.svg' />](https://infinite.red)

Also, to [Kevin VanGelder](https://github.com/kevinvangelder),
who spawned the idea for this library by saying, "Hey, you know what would
be cool? A REPL. We should do that."

# Change Log

See the full [CHANGES.md](CHANGES.md) file.

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