@gilak/dimension-arrow

A reusable React component for displaying dimension line arrows.

Installation

npm install @gilak/dimension-arrow

Usage

import { Dimension } from '@gilak/dimension-arrow';
import '@gilak/dimension-arrow/style';

function App() {
  return (
    <div style={{ width: '500px', height: '300px', position: 'relative' }}>
      <Dimension dimension="w" />
      <Dimension dimension="h" />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | dimension | "w" \| "h" | - | Dimension type (width or height) | | children | React.ReactNode | - | Content to render inside the arrow | | arrowColor | string | "#dcdcdc" | Color of the arrow | | textColor | string | "#333333" | Color of the text | | className | string | - | Additional CSS class name | | style | React.CSSProperties | - | Additional inline styles | | valueClassName | string | - | CSS class for the value display | | debounceMs | number | 16 | Debounce time for dimension updates | | observeParents | boolean | true | Whether to observe parent elements | | position | "relative" \| "absolute" | "absolute" | Positioning mode | | size | number | 40 | Size of the arrow |

Features

• Automatic dimension measurement
• Responsive arrows
• Customizable styling
• TypeScript support
• Accessibility features

License

MIT