All Projects → lucasconstantino → React Inspect Props

lucasconstantino / React Inspect Props

Licence: mit
React properties inspector with the power of Redux DevTools

Projects that are alternatives of or similar to React Inspect Props

mdebug
基于React开发的新一代web调试工具,支持React组件调试,类似于Chrome Devtools。A Lightweight, Easy To Extend Web Debugging Tool Build With React
Stars: ✭ 237 (+664.52%)
Mutual labels:  inspector, devtools
Nim
Streamline Your Node.js Debugging Workflow with Chromium (Chrome, Edge, More) DevTools.
Stars: ✭ 168 (+441.94%)
Mutual labels:  inspector, devtools
Portal
A clojure tool to navigate through your data.
Stars: ✭ 239 (+670.97%)
Mutual labels:  inspector, devtools
prosemirror-dev-toolkit
Injectable developer tools for ProseMirror rich-text editors implemented in Svelte and TypeScript.
Stars: ✭ 44 (+41.94%)
Mutual labels:  inspector, devtools
devtools-highlighter
DevTools extension that finds and highlights elements in the page
Stars: ✭ 29 (-6.45%)
Mutual labels:  inspector, devtools
Rawkit
🦊 Immediately Open Chrome DevTools when debugging Node.js apps
Stars: ✭ 306 (+887.1%)
Mutual labels:  inspector, devtools
InAppDevTools
Android library with a collection of tools for debugging, inspecting and reporting from within your own app
Stars: ✭ 26 (-16.13%)
Mutual labels:  inspector, devtools
Ply
CSS inspection aided by visual regression pruning
Stars: ✭ 370 (+1093.55%)
Mutual labels:  inspector, devtools
Yoda
Wise and powerful personal assistant, available in your nearest terminal
Stars: ✭ 674 (+2074.19%)
Mutual labels:  devtools
Devtools
The Hoa\Devtools library.
Stars: ✭ 5 (-83.87%)
Mutual labels:  devtools
Mist
A distributed, tag-based pub-sub service for modern web applications and container-driven cloud.
Stars: ✭ 634 (+1945.16%)
Mutual labels:  devtools
Redux Bug Reporter
🐛 A bug reporter and bug playback tool for redux. 🐛
Stars: ✭ 683 (+2103.23%)
Mutual labels:  devtools
Kafka2websocket
Read Kafka topics with WebSockets
Stars: ✭ 19 (-38.71%)
Mutual labels:  inspector
Anaconda Mode
Code navigation, documentation lookup and completion for Python.
Stars: ✭ 635 (+1948.39%)
Mutual labels:  devtools
Rfcs
RFCs for changes to DevTools
Stars: ✭ 12 (-61.29%)
Mutual labels:  devtools
Msw
Seamless REST/GraphQL API mocking library for browser and Node.js.
Stars: ✭ 7,830 (+25158.06%)
Mutual labels:  devtools
Mailcatcher
Catches mail and serves it through a dream.
Stars: ✭ 5,512 (+17680.65%)
Mutual labels:  devtools
Graphql Config
One configuration for all your GraphQL tools (supported by most tools, editors & IDEs)
Stars: ✭ 883 (+2748.39%)
Mutual labels:  devtools
Wappalyzer
Identify technology on websites.
Stars: ✭ 7,245 (+23270.97%)
Mutual labels:  devtools
Webdriverio
Next-gen browser and mobile automation test framework for Node.js
Stars: ✭ 7,214 (+23170.97%)
Mutual labels:  devtools

React Inspect Props Build Status

React properties inspector with the power of Redux DevTools

Install

1. Install Redux DevTools extension

2. yarn add react-inspect-props

Or, good ol' npm install --save react-inspect-props

Usage

This lib provides a single Higher-Order Component called inspectProps with the following signature:

inspectProps(
  name: string,
  options: Object | (props: Object) => Object
): HigherOrderComponent

This HoC will transparently connect your component to a new instance of the the Redux DevTools extension, identified by the name provided as first argument.

The second argument is optional. If provided, the object will be used when connecting to the extension. If a function is provided, it will eb executed passing pros as the argument. Refer to the documentation of that method for more info.

Simple as can

import React from 'react'
import { compose, withState } from 'recompose'
import { inspectProps } from 'react-inspect-props'

const Counter = ({ count, setCount }) => (
  <div>
    <button onClick={ () => setCount(++count) }>
      Increment
    </button>
    <pre>{ count }</pre>
  </div>
)

export default compose(
  withState('count', 'setCount', 0),
  inspectProps('Counter inspector')
)(Counter)

See a demo video: https://www.useloom.com/share/abaf237e04e94ac8a9f694e1cc063e4f

Disable on production

License

Copyright (c) 2017 Lucas Constantino Silva

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].