Pixel perfect layout inspection.
npm install inspx!npm
Pixel perfect layout inspection.
> Built for React as a proof of concept.
Install the package:
``sh`
npm install inspx --save-dev
Wrap the root of your application or arbitrary component trees:
`tsx
import Inspect from 'inspx';
`
Inspect elements by hovering an element and holding Option (⌥) simultaneously.
!demo
By default, any element with padding, margin, or width and height is inspectable.
You can disable certain properties:
`tsx`
size={false}
padding={false}
>
By default, the component will only be enabled in the development environment.
You can configure this behavior with the disabled prop:
`tsx`
process.env.NODE_ENV === 'staging' ||
process.env.NODE_ENV === 'production'
}
>
Optionally, you can leverage code splitting by wrapping the exported component and using your own instead.
> The library is lightweight enough for this to likely be a premature and insignificant optimization.
`tsx
import * as React from 'react';
import { InspectProps } from 'inspx';
const Inspect = React.lazy(() => import('inspx'));
export default function Loader(props: InspectProps) {
if (process.env.NODE_ENV === 'development') {
return children;
}
return (
);
}
``