@alita/inspx

内存

像素完美布局检查.

为回想所建作为概念的证明.

设置

安装软件包 :

npm install inspx --save-dev

环绕您的应用或任意组件树的根 :

import Inspect from 'inspx';

<Inspect>
  <App />
</Inspect>

使用量

通过盘旋一个元素和持有来检查元素 选项( ) 同时.

默认情况下,任何有垫、边距或宽度和高度的元素都可以检查.

您可以禁用某些属性 :

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

配置

默认情况下,该组件只能在开发环境中被启用.

您可以配置此行为 disabled 道具 :

<Inspect
  disabled={
    process.env.NODE_ENV === 'staging' || 
    process.env.NODE_ENV === 'production'
  }
>
  <App />
</Inspect>

可以选择的是,您可以通过包装导出组件并使用自己的组件来杠杆化代码分割.

图书馆的重量足够轻,这样很可能是过早和微不足道的优化.

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>
  );
}