react-rwanda-map/README.md

An interactive and customizable map of Rwanda for React applications.

# React Rwanda Map

An interactive and customizable SVG map of Rwanda for React applications. This component allows you to render a detailed map of Rwanda with interactive provinces that respond to hover events and can trigger custom callbacks.

![React Rwanda Map](https://via.placeholder.com/800x400?text=Rwanda+Map+Preview)

## Installation

```bash
npm install react-rwanda-map
```

or

```bash
yarn add react-rwanda-map
```

### Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install clsx @radix-ui/react-tooltip
```

## Usage

```jsx
import { RwandaMap } from 'react-rwanda-map';
import 'react-rwanda-map/dist/index.css'; // Import styles

function App() {
  const handleProvinceSelect = (province) => {
    if (province) {
      console.log(`Selected province: ${province}`);
    }
  };

  return (
    <div style={{ width: "100%", height: "600px" }}>
      <RwandaMap 
        selectedColor="#fa9e90"
        defaultColor="#E5E7EB"
        strokeColor="#fa9e90"
        provinceNameColor="#302d2c"
        onProvinceSelect={handleProvinceSelect}
      />
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `selectedColor` | `string` | `'#3B82F6'` | Color of the province when hovered |
| `defaultColor` | `string` | `'#E5E7EB'` | Default color of provinces |
| `strokeColor` | `string` | `'#4B5563'` | Color of province borders |
| `height` | `number` | `600` | Height of the map container in pixels |
| `scale` | `number` | `0.95` | Scale factor for the SVG map |
| `position` | `{ x: number, y: number }` | `{ x: 50, y: 50 }` | Position offset of the map within its container |
| `onProvinceSelect` | `(province: string \| null) => void` | `undefined` | Callback function triggered when a province is selected or deselected |
| `provinceNameColor` | `string` | `'#FFFFFF'` | Color of the province name in the tooltip |

## Features

- Interactive SVG map of Rwanda with all provinces
- Customizable colors for provinces, borders, and tooltips
- Responsive design that scales to fit its container
- Accessible with proper ARIA attributes
- Tooltips showing province names on hover
- Callback support for province selection events

## Examples

### Custom Colors

```jsx
<RwandaMap
  selectedColor="#FF5733"
  defaultColor="#DAE1E7"
  strokeColor="#2D3748"
  provinceNameColor="#000000"
/>
```

### Custom Size and Position

```jsx
<RwandaMap
  height={800}
  scale={1.2}
  position={{ x: 30, y: 20 }}
/>
```

### With Selection Callback

```jsx
<RwandaMap
  onProvinceSelect={(province) => {
    if (province) {
      fetchDataForProvince(province);
    } else {
      resetProvinceData();
    }
  }}
/>
```

## Tailwind CSS Integration

This component uses Tailwind CSS for styling. If you're using Tailwind in your project, make sure to configure it to include the component's styles:

```js
// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/react-rwanda-map/dist/**/*.{js,mjs}',
  ],
  // rest of your config
};
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

## License

MIT

## Author

Igwaneza Bruce