Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/VictorCazanave/react-svg-map
A set of React.js components to display an interactive SVG map
https://github.com/VictorCazanave/react-svg-map
checkbox component interactive map radiobutton react svg
Last synced: about 2 months ago
JSON representation
A set of React.js components to display an interactive SVG map
- Host: GitHub
- URL: https://github.com/VictorCazanave/react-svg-map
- Owner: VictorCazanave
- License: mit
- Created: 2018-03-11T16:48:49.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-11-19T14:49:29.000Z (about 2 years ago)
- Last Synced: 2024-10-01T07:46:38.719Z (2 months ago)
- Topics: checkbox, component, interactive, map, radiobutton, react, svg
- Language: JavaScript
- Homepage: https://victorcazanave.github.io/react-svg-map/
- Size: 1.43 MB
- Stars: 226
- Watchers: 4
- Forks: 47
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-svg-map - [demo](https://victorcazanave.github.io/react-svg-map/) - A set of components to display an interactive SVG map. (UI Components / Map)
- awesome-react - react-svg-map - A set of components to display an interactive SVG map.  (UI Components / Data Visualization)
- awesome-react-components - react-svg-map - [demo](https://victorcazanave.github.io/react-svg-map/) - A set of components to display an interactive SVG map. (UI Components / Map)
- fucking-awesome-react-components - react-svg-map - 🌎 [demo](victorcazanave.github.io/react-svg-map/) - A set of components to display an interactive SVG map. (UI Components / Map)
README
# react-svg-map
[](https://www.npmjs.com/package/react-svg-map)
[](https://travis-ci.org/VictorCazanave/react-svg-map)
[](https://codecov.io/gh/VictorCazanave/react-svg-map)
[](https://david-dm.org/VictorCazanave/react-svg-map)
[](https://david-dm.org/VictorCazanave/react-svg-map?type=peer)
_A set of React.js components to display an interactive SVG map._
## Demo
[Take a look at the live demo!](https://victorcazanave.github.io/react-svg-map/)
## Installation
### npm
`npm install --save react-svg-map`
### yarn
`yarn add react-svg-map`
## Usage
### :warning: Breaking change from v1
**This package does not include maps anymore!**
You have to install the map you need from [svg-maps](https://github.com/VictorCazanave/svg-maps) or you can use your own map. See [maps section](#maps) for more details.
If you are still using the 1.x.x version, look at the [v1 documentation](https://github.com/VictorCazanave/react-svg-map/tree/v1.3.2#react-svg-map).
### :earth_africa: Simple SVG Map
This is the base component to display an SVG map.
- Import `SVGMap` component from `react-svg-map`
- Import the map you want
- Optionally, import `react-svg-map/lib/index.css` if you want to apply the default styles
```javascript
import React from "react";
import ReactDOM from "react-dom";
import Taiwan from "@svg-maps/taiwan";
import { SVGMap } from "react-svg-map";
import "react-svg-map/lib/index.css";
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return ;
}
}
ReactDOM.render(, document.getElementById("app"));
```
#### API
| Prop | Type | Default | Description |
| ------------------- | ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
| map | Object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. |
| className | String | `'svg-map'` | CSS class of ``. |
| role | String | `'none'` | ARIA role of ``. |
| locationClassName | String\|Function | `'svg-map__location'` | CSS class of each ``. The function parameters are the location object and the location index. |
| locationTabIndex | String\|Function | `'0'` | Tabindex each ``. The function parameters are the location object and the location index. |
| locationRole | String | `'none'` | ARIA role of each ``. |
| locationAriaLabel | Function | `location.name` | ARIA label of each ``. The function parameters are the location object and the location index. |
| onLocationMouseOver | Function | | Invoked when the user puts the mouse over a location. |
| onLocationMouseOut | Function | | Invoked when the user puts the mouse out of a location. |
| onLocationMouseMove | Function | | Invoked when the user moves the mouse on a location. |
| onLocationClick | Function | | Invoked when the user clicks on a location. |
| onLocationKeyDown | Function | | Invoked when the user hits a keyboard key on a location. |
| onLocationFocus | Function | | Invoked when the user focuses a location. |
| onLocationBlur | Function | | Invoked when the user unfocuses a location. |
| isLocationSelected | Function | | Executed to determine if a location is selected. This property is used to set the `aria-checked` HTML attribute. |
| childrenBefore | Node | | "Slot" before all the locations (``). |
| childrenAfter | Node | | "Slot" after all the locations (``). |
### :ballot_box_with_check: Checkbox SVG Map
This is an implementation of `SVGMap` that behaves like a group of checkboxes.
It is based on this [WAI-ARIA example](https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html) to support keyboard navigation and be accessible.
- Import `CheckboxSVGMap` component from `react-svg-map`
- Import the map you want
- Optionally, import `react-svg-map/lib/index.css` if you want to apply the default styles
```javascript
import React from "react";
import ReactDOM from "react-dom";
import Taiwan from "@svg-maps/taiwan";
import { CheckboxSVGMap } from "react-svg-map";
import "react-svg-map/lib/index.css";
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return ;
}
}
ReactDOM.render(, document.getElementById("app"));
```
#### API
| Prop | Type | Default | Description |
| ------------------- | ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| map | Object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. |
| className | String | `'svg-map'` | CSS class of ``. |
| locationClassName | String\|Function | `'svg-map__location'` | CSS class of each ``. The function parameters are the location object and the location index. |
| locationAriaLabel | Function | `location.name` | ARIA label of each ``. The function parameters are the location object and the location index. |
| selectedLocationIds | String[] | | List of `id`s of the **initial** selected locations. It is used only when the component is mounted and is not synchronized when updated. |
| onChange | Function | | Invoked when the user selects/deselects a location. The list of selected locations is passed as parameter. |
| onLocationMouseOver | Function | | Invoked when the user puts the mouse over a location. |
| onLocationMouseOut | Function | | Invoked when the user puts the mouse out of a location. |
| onLocationMouseMove | Function | | Invoked when the user moves the mouse on a location. |
| onLocationFocus | Function | | Invoked when the user focuses a location. |
| onLocationBlur | Function | | Invoked when the user unfocuses a location. |
| childrenBefore | Node | | "Slot" before all the locations (``). |
| childrenAfter | Node | | "Slot" after all the locations (``). |
### :radio_button: Radio SVG Map
This is an implementation of `SVGMap` that behaves like a group of radio buttons.
It is based on this [WAI-ARIA example](https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-1/radio-1.html) to support keyboard navigation and be accessible.
- Import `RadioSVGMap` component from `react-svg-map`
- Import the map you want
- Optionally, import `react-svg-map/lib/index.css` if you want to apply the default styles
```javascript
import React from "react";
import ReactDOM from "react-dom";
import Taiwan from "@svg-maps/taiwan";
import { RadioSVGMap } from "react-svg-map";
import "react-svg-map/lib/index.css";
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return ;
}
}
ReactDOM.render(, document.getElementById("app"));
```
#### API
| Prop | Type | Default | Description |
| ------------------- | ---------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| map | Object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. |
| className | String | `'svg-map'` | CSS class of ``. |
| locationClassName | String\|Function | `'svg-map__location'` | CSS class of each ``. The function parameters are the location object and the location index. |
| locationAriaLabel | Function | `location.name` | ARIA label of each ``. The function parameters are the location object and the location index. |
| selectedLocationId | String | | `id` of the **initial** selected location. It is used only when the component is mounted and is not synchronized when updated. |
| onChange | Function | | Invoked when the user selects a location. The selected location is passed as parameter. |
| onLocationMouseOver | Function | | Invoked when the user puts the mouse over a location. |
| onLocationMouseOut | Function | | Invoked when the user puts the mouse out of a location. |
| onLocationMouseMove | Function | | Invoked when the user moves the mouse on a location. |
| onLocationFocus | Function | | Invoked when the user focuses a location. |
| onLocationBlur | Function | | Invoked when the user unfocuses a location. |
| childrenBefore | Node | | "Slot" before all the locations (``). |
| childrenAfter | Node | | "Slot" after all the locations (``). |
## Maps
### Existing maps
Since v2.0.0 this package does not provide maps anymore. All the existing maps have been moved to the independant [svg-maps](https://github.com/VictorCazanave/svg-maps) project because they may be useful for other components/projects.
### Custom maps
You can modify existing maps or create your own.
#### Modify a map
1. Import the map to modify
1. Create a new object from this map
1. Pass this new object as `map` prop of `` component
```javascript
import React from "react";
import Taiwan from "@svg-maps/taiwan";
import { SVGMap } from "react-svg-map";
class App extends React.Component {
constructor(props) {
super(props);
// Create new map object
this.customTaiwan = {
...Taiwan,
label: "Custom map label",
locations: Taiwan.locations.map(location => {
// Modify each location
})
};
}
render() {
return ;
}
}
```
It is recommended to not modify the SVG properties (viewBox, path), because it may break the map's display.
#### Create a map
If you create a new map (other country, city...), feel free to [contribute to svg-maps project](https://github.com/VictorCazanave/svg-maps/blob/master/CONTRIBUTING.md)!