1.0.1 • Published 6 months ago
react-show-my-divs v1.0.1
react-show-my-divs
Simplifies visual debugging by recursively colorizing any HTML elements.
This is a visual debugging tool for react developers.
npm install react-show-my-divs
import { ShowMyDivs } from "react-show-my-divs";
Wrap anything in <ShowMyDivs> ... </ShowMyDivs>
and your divs will shine!
Is your page layout off, but you can´t find the reason?
Colorize parts of, or your entire page layout in one go with react-show-my-divs.
-No more adding background-color: 'red'
style to components to see how they fit in your layout.
You can also
Supply the HTML element types you wish to colorize as a string array in the HTMLTypeNames prop.
Supply your own color array woth the color prop.
Render a 1px. border around every element with the borders prop.
Note: This component injects backgroundColor and borderColor CSS prop into your elements of choice. That means that it will only colorize on elements that natively have these CSS props.
Props
prop | example value | default | type | required |
---|---|---|---|---|
HTMLTypeNames | "div","li" | div | string[] | no |
colors | "red","#00FF00","blue" | some cool colors | string[] | no |
borders | true | false | boolean | no |