React DXF Coordinates

A powerful, lightweight React component for viewing DXF files with interactive area selection and coordinate extraction.

Features • Installation • Quick Start • Documentation • Examples • Contributing

✨ Features

• 🎯 Interactive Area Selection - Click and drag to select areas on DXF drawings
• 📍 Real-time Coordinate Tracking - Get mouse coordinates as you move
• ⚡ TypeScript Support - Built with TypeScript for type safety
• 🪝 Custom Hooks - Powerful useDxfCoordinates hook for state management
• 🔧 Zero Dependencies - Lightweight with minimal external dependencies
• 🚀 Performance Optimized - Smooth interactions even with complex drawings

🚀 Installation

npm install react-dxf-coordinates

yarn add react-dxf-coordinates

pnpm add react-dxf-coordinates

⚡ Quick Start

import React from 'react'
import { DxfCoordinates, useDxfCoordinates } from 'react-dxf-coordinates'

function App() {
  const [file, setFile] = useState<File | null>(null)
  const dxfState = useDxfCoordinates()

  console.log(dxfState.areas)

  return (
    <div>
      <input
        type='file'
        accept='.dxf'
        onChange={(e) => {
          const file = e.target.files?.[0] || null
          setFile(file)
        }}
      />

      <DxfCoordinates file={file} controller={dxfState} />
    </div>
  )
}

export default App

📖 Documentation

Components

<DxfCoordinates />

The main component for rendering DXF files with interactive capabilities.

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | file | File | required | .dxf file | controller | UseDxfCoordinatesReturn | required | Controller object from useDxfCoordinates hook | | hasToolBar | boolean | true | Show toolbar |

Hooks

useDxfCoordinates()

A powerful hook that provides state management and controls for the DXF coordinates.

Returns:

type DxfCoordinatesHook = {
  mode: Mode
  setMode: React.Dispatch<React.SetStateAction<Mode>>
  areas: Area[]
  setAreas: React.Dispatch<React.SetStateAction<Area[]>>
  activeAreaIndex: number;
  setActiveAreaIndex: React.Dispatch<React.SetStateAction<number>>
}

Types

type Mode = 'pan' | 'select'

interface Area {
  x: number
  y: number
  width: number
  height: number
}

📋 Examples

Basic Usage

import { DxfCoordinates, useDxfCoordinates } from 'react-dxf-coordinates'

function BasicExample() {
  const [file, setFile] = useState<File | null>(null)
  const dxfState = useDxfCoordinates()

  return (
    <DxfCoordinates file={file} controller={dxfState} />
  )
}

🛠️ Development

Prerequisites

• Node.js 22.0.0 or higher
• npm, yarn, or pnpm

Setting up development environment

git clone https://github.com/CreamCheese-Ja/react-dxf-coordinates.git
cd react-dxf-coordinates
npm install

Running the example

npm run example

Building the library

npm run build

📄 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Process

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Add tests for your changes
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

Reporting Issues

Please use the GitHub Issues page to report bugs or request features.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with ❤️ for the React and CAD communities
• Inspired by the need for better DXF visualization tools in web applications
• Thanks to all contributors who help make this project better

📊 Stats

⬆ Back to Top

Made with ❤️ by CreamCheese-Ja