my-car-selector

A reusable, customizable React component library for selecting car parts on an SVG car illustration.
Supports multi-language (i18n), dynamic part selection, screenshots, and easy styling.

Features

• Dynamic SVG rendering of car parts from a single data source
• Selectable parts with customizable fill and stroke colors
• Internationalization (i18n) support (English & Arabic included)
• Screenshot capability of the current selection
• TypeScript support with exported types
• Easy integration with MUI themes

Installation

npm install my-car-selector
# or
yarn add my-car-selector

Usage

import { useRef, useState } from "react";
import { CarPartSelector, type CarPartSelectorHandle } from "my-car-selector";
import type { SelectionData, SelectedPart } from "my-car-selector";

const App = () => {
  const selectorRef = useRef<CarPartSelectorHandle>(null);
  const [selectedData, setSelectedData] = useState<SelectionData | null>(null);

  const handleGetSelection = async () => {
    if (selectorRef.current) {
      const data = await selectorRef.current.getSelectionData();
      setSelectedData(data);
    }
  };

  return (
    <div>
      <CarPartSelector
        ref={selectorRef}
        direction="ltr"
        language="en"
        fillColor="rgba(0, 200, 255, 0.4)"
        strokeColor="pink"
        onSelectionChange={(parts: SelectedPart[]) => console.log("Selection changed:", parts)}
      />
      <button onClick={handleGetSelection}>Get Selection</button>
      {selectedData && (
        <div>
          <h3>Selected Parts</h3>
          <ul>
            {selectedData.selectedParts.map((part) => (
              <li key={part.id}>{part.shortName.en}</li>
            ))}
          </ul>
          {selectedData.screenshot && (
            <img src={selectedData.screenshot} alt="Screenshot" style={{ width: 300 }} />
          )}
        </div>
      )}
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | |---------------------|----------------------------------------|--------------------------------|--------------------------------------------------| | direction | 'ltr' \| 'rtl' | 'ltr' | Text direction | | language | string | 'en' | Language code for i18n | | initialSelectedParts | string[] | [] | Array of initially selected part IDs | | onSelectionChange | (selectedParts: SelectedPart[]) => void | | Callback when selection changes | | svgWidth | number | 1000 | SVG width | | svgHeight | number | 600 | SVG height | | fillColor | string | 'rgba(255, 107, 53, 0.3)' | Fill color for selected parts | | strokeColor | string | '#000000' | Stroke color for all parts | | theme | Theme (MUI) | | Custom MUI theme |

Types

export interface SelectedPart {
  id: string;
  class: string;
  shortName: { en: string; ar: string };
  longName: { en: string; ar: string };
  shortNameKey: string;
  longNameKey: string;
  textX: number;
  textY: number;
}

export interface SelectionData {
  selectedParts: SelectedPart[];
  screenshot: string | null;
}

export interface CarPartSelectorHandle {
  getSelectionData: () => Promise<SelectionData>;
}

Styling

• Uses CSS Modules for styling.
• You can override styles by providing your own CSS or using the provided class names.

License

MIT

Credits

Built with React, TypeScript, MUI, and react-i18next.