Pixel perfect layout inspection.

Overview

image

inspx

npm

Pixel perfect layout inspection.

Built for React as a proof of concept.

Setup

Install the package:

npm install inspx --save-dev

Wrap the root of your application or arbitrary component trees:

import Inspect from 'inspx';

<Inspect>
  <App />
</Inspect>

Usage

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:

<Inspect 
  margin 
  size={false} 
  padding={false}
>
  <App />
</Inspect>

Configuration

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

You can configure this behavior with the disabled prop:

<Inspect
  disabled={
    process.env.NODE_ENV === 'staging' || 
    process.env.NODE_ENV === 'production'
  }
>
  <App />
</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.

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 (
    <React.Suspense fallback={null}>
      <Inspect disabled={false} {...props} />
    </React.Suspense>
  );
}
Comments
  • Disabled is ignored if NODE_ENV=production

    Disabled is ignored if NODE_ENV=production

    Hello and thank you for the great library.

    I have a specific problem, as I would like inspx to stay active on development/qa/preview deploys. This would help people who review and test features on these non-production branches.

    But it seems that library itself disables when NODE_ENV is set to production and disabled is ignored.

    Code looks something like this:

    const isPreviewOrDev =
      process.env.NODE_ENV === 'development' || process.env.PREVIEW_ENV;
    
    <Inspect disabled={!isPreviewOrDev}>
      <Component {...props} {...pageProps} />
    </Inspect>
    

    Where PREVIEW_ENV is a env variable which tells the app it runs in a (p)review mode and not in a real production mode.

    I hope I was clear enough πŸ™ˆ

    Thank you!

    opened by Stanko 12
  • Support custom event

    Support custom event

    support custom event

    <img src={InspectImg}  onClick={()=>{
            const event = new CustomEvent('inspxswitch');
            window.dispatchEvent(event);
            }}/>
    

    mobile-display

    opened by xiaohuoni 2
  • Can not Inspect small button elements in chrome devtool mobile mode

    Can not Inspect small button elements in chrome devtool mobile mode

    Can not Inspect small button elements in chrome devtool mobile mode.

    if I click the button first, and then hover an element and hold Option (βŒ₯) , it works. but some button will redirect to another page, so ......

    opened by zerofront 0
  • Is it possible to specify a container instead of creating a span?

    Is it possible to specify a container instead of creating a span?

    Creating a span tag package will affect the page layout and is not flexible enough.

    It is recommended to be able to pass in a ref or an ID or the like.

    opened by lzm0x219 0
  • feat: use e.altkey instaed of e.key

    feat: use e.altkey instaed of e.key

    Short description: use event.altKey to check alt key pressed for support linux (and more compatibility)

    Context: I add altKeyPressed in useEffect hook to check alt key was pressed in onKeyUp handler to check alt key was pressed. because e.altKey is always false in keyup event. so I set altKeyPressed to true in onKeyDown handler and reset to false in onKeyUp handler to prevent call uninspect by other keyboard events is not alt key.

    close #2

    opened by iamchanii 1
Owner
rauno
ui / design systems @vercel
rauno
React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.

A draggable and resizable grid layout with responsive breakpoints, for React.

RGL 16.9k Jan 2, 2023
Layout-reactJS - Layout with React JS using NASA API

Layout with React JS using NASA API Website link on the web: Click Here Preview:

Anastacio Menezes 4 Feb 2, 2022
Auto Responsive Layout Library For React

autoresponsive-react Auto responsive grid layout library for React. Who are using ⭐ ⭐ ⭐ alibaba/ice ⭐ ⭐ ⭐ ice-lab/react-materials ⭐ ⭐ ⭐ ant-design/ant

θΎΎε³°ηš„ε€ε€© 1.5k Dec 15, 2022
A multi window layout manager for webapps

Golden Layout Version 2 Version 2.0 is now available from NPM. This version is a substantial change from the previous (1.5.9) version. The change can

null 5.8k Jan 7, 2023
The layout engine for React

Responsive, sortable, filterable and draggable grid layouts with React Design Principles ????‍?? Muuri-React is the React implementation of the amazin

Paolo Longo 274 Dec 21, 2022
A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and suppo

Samuel Reed 16.9k Jan 1, 2023
Resizable Flex layout container components for advanced React web applications

About Re-F|ex Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my

Philippe Leefsma 532 Jan 8, 2023
Animated grid layout component for React

react-stonecutter Animated grid layout component for React, inspired by Masonry. Choose between CSS Transitions or React-Motion for animation. Demo In

Dan Train 1.2k Dec 24, 2022
FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

Caplin 649 Jan 7, 2023
Resizable Flex layout container components for advanced React web applications

About Re-F|ex Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my

Philippe Leefsma 530 Dec 21, 2022
This react component resize the layout of HTML using a handle

react-resize-layout This react component resize the layout of HTML using a handle Demo View the demo page Example View the example demo page npm insta

null 36 Nov 3, 2022
Photo layout editor for react

react-photo-layout-editor 사진 λ ˆμ΄μ•„μ›ƒμ„ νŽΈμ§‘ν•˜λŠ” μ›Ή ν”„λ‘œκ·Έλž¨μž…λ‹ˆλ‹€. This is photo layout editor for react μ˜ˆμ „ Instagram blog( http://blog.instagram.com/ )에 μžˆλŠ” μ •λ ¬λœ μ΄λ―Έμ§€μ˜

redgoose 115 Oct 7, 2022
XMasonry: Masonry Layout for React JS

Responsive, minimalistic and full-featured native masonry layout (grid) for React JS.

Nikita Savchenko 79 Dec 2, 2022
A multi-tab layout manager

FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved. Run the Demo Try it now

Caplin 646 Jan 1, 2023
Physical representation of layout composition to create declarative responsive layouts in React.

Atomic Layout is a spatial distribution library for React. It uses CSS Grid to define layout areas and render them as React components. This pattern e

Artem Zakharchenko 1.1k Dec 26, 2022
A powerful React component to abstract over flexbox and create any layout on any browser

FlexView A powerful React component to abstract over flexbox and create any layout on any browser. Install yarn add react-flexview Why The flexbox AP

buildo 277 Nov 11, 2022
Kilvin is a set of universal & primitive Layout Components for React.

Kilvin is a set of universal & primitive Layout Components for React.

Robin Weser 21 May 26, 2022
Simple Layout Field to offer a variety possibilities to react-jsonschema-forms

react-jsonschema-form-layout Just a small custom field for the awesome react-jsonschema-form. see DEMO Key features: support bootstrap's grid add non-

Audibene Labs 67 Jun 16, 2022
Photo layout editor for react

react-photo-layout-editor 사진 λ ˆμ΄μ•„μ›ƒμ„ νŽΈμ§‘ν•˜λŠ” μ›Ή ν”„λ‘œκ·Έλž¨μž…λ‹ˆλ‹€. This is photo layout editor for react μ˜ˆμ „ Instagram blog( http://blog.instagram.com/ )에 μžˆλŠ” μ •λ ¬λœ μ΄λ―Έμ§€μ˜

redgoose 115 Oct 7, 2022