https://github.com/raunofreiberg/inspx

Pixel perfect layout inspection.
https://github.com/raunofreiberg/inspx

component dx element inspect layout react

Last synced: 20 days ago
JSON representation

Pixel perfect layout inspection.

• Host: GitHub
• URL: https://github.com/raunofreiberg/inspx
• Owner: raunofreiberg
• License: mit
• Created: 2021-04-23T14:11:28.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-01T15:26:58.000Z (almost 2 years ago)
• Last Synced: 2024-10-16T07:32:07.083Z (26 days ago)
• Topics: component, dx, element, inspect, layout, react
• Language: TypeScript
• Homepage: https://inspx.rauno.xyz
• Size: 1.1 MB
• Stars: 1,416
• Watchers: 7
• Forks: 31
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![image](/www/public/og.png)

## inspx

![npm](https://img.shields.io/npm/v/inspx?style=flat&colorA=000000&colorB=000000)

Pixel perfect layout inspection.

> Built for React as a proof of concept.

## Setup

Install the package:

```sh

npm install inspx --save-dev

```

Wrap the root of your application or arbitrary component trees:

```tsx

import Inspect from 'inspx';

  

```

## Usage

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

![demo](/public/demo.gif)

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

You can disable certain properties:

```tsx

  

```

## Configuration

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

You can configure this behavior with the `disabled` prop:

```tsx

  

```

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 === 'production') {

    return props.children;

  }

  return (

    

      

    

  );

}

```