ui-debug-kit

Various tools for debugging the layout and rendering of React component trees.

Usage no npm install needed!

<script type="module">
  import uiDebugKit from 'https://cdn.skypack.dev/ui-debug-kit';
</script>

README

UI Debug Kit

Various tools for debugging the layout and rendering of React component trees.

Installation

  • 1) npm install ui-debug-kit --save-exact

The --save-exact flag is recommended (to disable version-extending), since this package uses Explicit Versioning (Release.Breaking.FeatureOrFix) rather than SemVer (Breaking.Feature.Fix).

For FeatureOrFix version-extending (recommended for libraries), prepend "~" in package.json. (for Breaking, prepend "^")

Usage

Example:

// render function of a React component-class
render() {
    [...]

    // if condition is true at time of render, a red outline box is displayed for 3s (by default), with the given text overlaid
    if (someCondition) {
        FlashComp(this, {wait: 0, text: `Look at me!`});
    }

    return [...];
}