A highly customizable and interactive USA map component for React, allowing easy integration, state-based customization, and interactivity for data visualization and user interaction.
npm install @mirawision/usa-map-reactbash
npm install @mirawision/usa-map-react
`
or
`bash
yarn add @mirawision/usa-map-react
`
Module Support
This library supports both CommonJS and ES Modules for maximum compatibility:
- CommonJS: require('@mirawision/usa-map-react')
- ES Modules: import { USAMap } from '@mirawision/usa-map-react'
The library automatically detects your module system and provides the appropriate format.
Basic Usage
`tsx
import React from 'react';
import { USAMap, USAStateAbbreviation } from '@mirawision/usa-map-react';
const handleStateClick = (stateAbbreviation: USAStateAbbreviation) => {
console.log(You clicked on ${stateAbbreviation});
};
const customStates = {
CA: {
fill: 'red',
onClick: handleStateClick,
},
TX: {
fill: 'blue',
stroke: 'green',
onClick: handleStateClick,
},
};
const App = () => (
US Map
);
export default App;
`
Advanced Usage Examples
$3
`tsx
import React, { useState } from 'react';
import { USAMap, StateAbbreviations, USAStateAbbreviation } from '@mirawision/usa-map-react';
const App = () => {
const [hoveredState, setHoveredState] = useState(null);
const [selectedStates, setSelectedStates] = useState([]);
const customStates = useMemo(() => {
const settings: MapSettings = {};
StateAbbreviations.forEach((state) => {
let fill = undefined;
let stroke = undefined;
if (selectedStates.includes(state)) {
fill = '#c6dbee';
stroke = '#6f8fa5';
} else if (hoveredState === state) {
fill = '#e6f3ff';
stroke = '#4a90e2';
}
settings[state] = {
fill,
stroke,
onClick: () => setSelectedStates(selectedStates.includes(state)
? selectedStates.filter(s => s !== state)
: [...selectedStates, state]),
onHover: () => setHoveredState(state),
onLeave: () => setHoveredState(null),
};
});
return settings;
}, [selectedStates, hoveredState]);
return (
Hovered: {hoveredState || 'None'}
Selected: {selectedStates.join(', ') || 'None'}
);
};
`
$3
`tsx
import React from 'react';
import { USAMap, USAStateAbbreviation } from '@mirawision/usa-map-react';
const App = () => {
const customStates = {
CA: {
fill: '#4ecdc4',
label: {
enabled: true,
render: (state: USAStateAbbreviation) => (
{state}
),
},
tooltip: {
enabled: true,
render: (state: USAStateAbbreviation) => (
{state}
California - The Golden State
),
},
},
};
return
};
`
$3
`tsx
import React, { useState } from 'react';
import { USAMap, USAStateAbbreviation } from '@mirawision/usa-map-react';
const App = () => {
const [hiddenStates, setHiddenStates] = useState(['AK', 'HI']);
const toggleStates = () => {
setHiddenStates((prev) => prev.includes('AK') ? [] : ['AK', 'HI']);
};
return (
);
};
`
$3
`tsx
import React, { useState } from 'react';
import { USAMap, USAStateAbbreviation, StateAbbreviations } from '@mirawision/usa-map-react';
const App = () => {
const [hoveredState, setHoveredState] = useState(null);
const [clickedStates, setClickedStates] = useState([]);
const [showLabels, setShowLabels] = useState(true);
const [showTooltips, setShowTooltips] = useState(true);
const [hiddenStates, setHiddenStates] = useState(['AK', 'HI']);
const mapSettings = {};
StateAbbreviations.forEach((state) => {
if (!hiddenStates.includes(state)) {
mapSettings[state] = {
fill: clickedStates.includes(state) ? '#ff6b6b' : '#e9e9e9',
stroke: clickedStates.includes(state) ? '#d63031' : '#bdc3c7',
onClick: () => {
setClickedStates((prev) => prev.includes(state)
? prev.filter(s => s !== state)
: [...prev, state]
);
},
onHover: () => setHoveredState(state),
onLeave: () => setHoveredState(null),
label: { enabled: showLabels },
tooltip: { enabled: showTooltips },
};
}
});
return (
Hovered: {hoveredState || 'None'}
Clicked: {clickedStates.join(', ') || 'None'}
hiddenStates={hiddenStates}
/>
);
};
`
Props
$3
An optional prop to set the default style and behavior for all states. It can have the following properties:
- fill (string): The default fill color for states.
- stroke (string): The default stroke color for states.
- onClick (function): Default click handler for states.
- onHover (function): Default hover handler for states.
- onLeave (function): Default leave handler for states.
- onFocus (function): Default focus handler for states.
- onBlur (function): Default blur handler for states.
- label (object): Default label configuration.
- enabled (boolean): Whether to show labels. Default: true.
- render (function): Custom render function for labels. Default: state abbreviation.
- tooltip (object): Default tooltip configuration.
- enabled (boolean): Whether to show tooltips. Default: true.
- render (function): Custom render function for tooltips. Default: state name.
$3
An optional prop to customize individual states. It is an object where the key is the state abbreviation and the value is an object with the same properties as defaultState.
$3
An optional prop to set the overall map settings. It can have the following properties:
- width (number | string): The width of the SVG element.
- height (number | string): The height of the SVG element.
$3
An optional array of state abbreviations to hide from the map (e.g., ['AK', 'HI']` to hide Alaska and Hawaii).