algeria-map-ts
Version:
A react component that displays an interactive map of Algeria including all 58 wilayas with custom colors for each wilayas.
101 lines (68 loc) • 5.28 kB
Markdown
# algeria-map-ts
A React component that displays an interactive map of Algeria including all 58 wilayas.
## Demo
You can see a live demo of the component in action at the following link:
[Live Demo](https://codesandbox.io/p/devbox/algeria-map-ts-v9p6zg)
## Installation
This component is available via npm. To install, run the following command:
**npm**
```bash
npm install --save algeria-map-ts
```
**yarn**
```bash
yarn add algeria-map-ts
```
## Usage
The component is straightforward to use. First, import it, and then use it as a regular React component:
**Example:**
```ts
import { Map } from "react-algeria-map-ts";
<Map
color="#55E6C1"
HoverColor="#58B19F"
stroke="#fff"
hoverStroke="#218c74"
height="400px"
width="400px"
data={data}
onWilayaClick={(wilaya, data) => console.log(wilaya, data)}
/>;
```
### Props
| Prop | Type | Description |
| ------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| color | string | Set the default color of the wilayas in the map |
| HoverColor | string | Set the color of the hovered wilaya |
| stroke | string | Set the color of the borders of the wilayas |
| hoverStroke | string | Set the color of the borders of the hovered wilaya |
| height | string | Set the occupied height by the map |
| width | string | Set the occupied width by the map |
| data | object | Sets the data to show in hover or click actions on each wilaya. <br>The keys are fixed, and the values of the keys <br> `value` and `color` if u didn't give a color to a wilaya then the default color will be applied. |
| onWilayaClick | function(key: string, value: string \| number \| boolean): void | The callback function to execute when the wilaya is being clicked |
## Data Prop
The `data` prop is an object where each key is the name of the wilaya, and its value is an `object` with `value` and `color` properties. The value represents the data to display, and color is the color of the wilaya.
**Exmaple:**
```js
const data = {
Adrar: { value: 120, color: "#fff9eb" },
Alger: { value: 60, color: "#ebf9ee" },
// ... other wilayas
};
```
Feel free to customize the data object to include the specific values and colors you want for each wilaya.
## TypeScript Support
The component is now fully compatible with TypeScript. Benefit from type checking and improved developer experience.
## Contributing
We warmly welcome contributions from everyone, regardless of their level of expertise.
If you're making a major change, it's a good idea to create an issue first to discuss it.
To start contributing, follow these steps:
1. Fork the repo.
2. Clone your fork: `git clone https://github.com/Ad019El/algeria-map-ts.git`
3. Create your feature branch: `git checkout -b my-new-feature`
4. Make your changes and commit them: `git commit -am 'Add some feature'`
5. Push to the branch: `git push origin my-new-feature`
6. Submit a pull request.
We'll review your pull request as soon as we can. Thanks for your contribution!
## Credits
This project is an enhancement of the original [react-algeria-map](https://github.com/AkliYalaoui/react-algeria-map).