inspx

Pixel perfect layout inspection.

Built for React as a proof of concept.

Setup

Install the package:

1npm install inspx --save-dev

Wrap the root of your application or arbitrary component trees:

1import Inspect from 'inspx';
2
3<Inspect>
4  <App />
5</Inspect>

Usage

Inspect elements by hovering an element and holding Option (⌥) simultaneously.

By default, any element with padding, margin, or width and height is inspectable.

You can disable certain properties:

1<Inspect 
2  margin 
3  size={false} 
4  padding={false}
5>
6  <App />
7</Inspect>

Configuration

By default, the component will only be enabled in the development environment.

You can configure this behavior with the disabled prop:

1<Inspect
2  disabled={
3    process.env.NODE_ENV === 'staging' || 
4    process.env.NODE_ENV === 'production'
5  }
6>
7  <App />
8</Inspect>

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.

1import * as React from 'react';
2import { InspectProps } from 'inspx';
3
4const Inspect = React.lazy(() => import('inspx'));
5
6export default function Loader(props: InspectProps) {
7  if (process.env.NODE_ENV === 'production') {
8    return props.children;
9  }
10  return (
11    <React.Suspense fallback={null}>
12      <Inspect disabled={false} {...props} />
13    </React.Suspense>
14  );
15}