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.

Installation

npm install react-rwanda-map

or

yarn add react-rwanda-map

Peer Dependencies

This package requires the following peer dependencies:

npm install clsx @radix-ui/react-tooltip

Usage

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

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

Custom Size and Position

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

With Selection Callback

<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:

// 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