Inspecting / time travelling state changes of React component on Redux DevTools Extension or React Native Debugger
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE.md
README.md
package.json
yarn.lock

README.md

remotedev-react-state Build Status NPM version Greenkeeper badge

Inspecting / time travelling state changes of React component on Redux DevTools Extension or React Native Debugger, inspired by the article - Redux DevTools without Redux, make it as simple util.

Usage

import React from 'react'
import connectToDevTools from 'remotedev-react-state'

class App extends React.Component {
  state = { count: 0 }

  componentWillMount() {
    // Connect to devtools after setup initial state
    connectToDevTools(this/*, options */)
  }

  ...
}

See the example.

connectToDevTools(instance, options)

  • instance - A react instance, you could get this in component lifecycle or by ref.
  • options - Exposed options used for connect API of redux-devtools-extension. We have specific options:
    • name: String - Name of devtools instance, Component - {display name} by default.
    • actionName: String | Function - The action name will be displayed on devtools, you could use function(state) for return action name. State change by default.

connectToDevTools.ref(options)

Create connectToDevTools function can be used for component ref prop.

Example:

<App ref={connectToDevTools.ref(/* options */)} />

If you haven't redux-devtools-extension on your environment (Any react renderer that not on Chrome/Firefox/Electron/React Native Debugger), it will use the remote API of remotedev.

TODO

  • Remove devtools instance when component unmount

License

MIT