https://github.com/venryx/ui-debug-kit
Various tools for debugging the layout and rendering of React component trees.
https://github.com/venryx/ui-debug-kit
Last synced: 12 months ago
JSON representation
Various tools for debugging the layout and rendering of React component trees.
- Host: GitHub
- URL: https://github.com/venryx/ui-debug-kit
- Owner: Venryx
- License: mit
- Created: 2022-02-07T14:55:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-05-25T15:16:23.000Z (about 3 years ago)
- Last Synced: 2025-08-04T13:11:41.164Z (12 months ago)
- Language: JavaScript
- Size: 43 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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](https://medium.com/sapioit/why-having-3-numbers-in-the-version-name-is-bad-92fc1f6bc73c) (`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 [...];
}
```