React USAMapSelect Component

The USAMapSelect component is a React SVG map of the United States of Americca with simple interactive features. It allows you to highlight and interact with individual states, providing callbacks for mouse events and some customization options for styling.

Live example

• USA Map Select

Installation

npm install react-usa-map-select

Usage

const MyComponent = () => {
 const handleClick = (event) => {
  // Handle click event
  console.log(`Clicked on state: ${event.currentTarget.getAttribute('name')}`);
 };

 const handleMouseEnter = (event) => {
  // Handle mouse enter event
  console.log(`Mouse entered state: ${event.currentTarget.getAttribute('name')}`);
 };

 const handleMouseLeave = () => {
  // Handle mouse leave event
  console.log('Mouse left a state');
 };

 return (
  <>
   <h1>Interactive USA Map</h1>
   <USAMapSelect
    onClick={handleClick}
    onUSAStateMouseEnter={handleMouseEnter}
    onUSAStateMouseLeave={handleMouseLeave}
    showStateNameOnHover={true}
    USAStateOnHoverColor="blue"
    USAStateOnHoverStrokeColor="white"
   />
  </>
 );
};

export default MyComponent;

Important Note on TailwindCSS Integration

As of the date of publishing this package, TailwindCSS does not support native package resolution for styles. This means that any custom styling provided by this package using TailwindCSS will not automatically be included in your project. To ensure that the TailwindCSS styles from this package are applied correctly, you need to update your TailwindCSS configuration in your project.

Please follow these steps (assuming you've already installed TailwindCSS and created a configuration file):

1. Update your tailwind.config.js file to include the paths to the components of this package:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    ...
    "./node_modules/react-terminal-emulator-ui/**/*.{js,ts,jsx,tsx}", // Add this line,
    ...
  ],
};

For more information refer to: https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries

Props

API

| Prop | Type | Default | Description | |------------------------------|-------------------------------------------------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------| | onClick | (event: React.SyntheticEvent<SVGGElement>) => void | - | Callback function triggered on clicking a state. | | onUSAStateMouseEnter | (event?: React.SyntheticEvent<SVGGElement>) => void | - | Callback function triggered on mouse enter over a state. | | onUSAStateMouseLeave | (event?: React.SyntheticEvent<SVGGElement>) => void | - | Callback function triggered on mouse leave from a state. | | showStateNameOnHover | boolean | false | Boolean indicating whether to display the state name on hover. | | USAStateTextColor | keyof ReturnType<typeof colorVariants> | slate | Color variant for the state text if showStateNameOnHover is true. Choose from: slate, white, gray, yellow, green, emerald, blue, purple, orange, pink. | | USAStateColor | keyof ReturnType<typeof colorVariants> | gray | Color variant for the state. Choose from: slate, white, gray, yellow, green, emerald, blue, purple, orange, pink. | | USAStateOnHoverColor | keyof ReturnType<typeof colorVariants> | slate | Color variant for the state on hover. Choose from: slate, white, gray, yellow, green, emerald, blue, purple, orange, pink. | | USAStateOnHoverStrokeColor | keyof ReturnType<typeof colorVariants> | - | Stroke color variant for the state on hover. Choose from the same options as USAStateOnHoverColor. | | USAStatePosition | { x: string, y: string } or "center" | - | Position of the state name relative to the SVG wrapper. If center, the state name will persist the center position relative to the SVG wrapper. |

Styling

The USAMapSelect component is built using Tailwind CSS. You can customize the styling of the state name that shows on the top of the map by passing in your own Tailwind CSS classes as props. You can also style the svg wrapper element by passing in a class name to the wrapperClassName prop.

| Prop | Type | Default | Description | |----------------------|----------|---------|-----------------------------------------------------------------------------------------------------| | stateTextClassname | string | - | Class name for the element that renders the state name when showStateNameOnHover is true | | wrapperClassName | string | - | Class name for the element that wraps the map. |

License

MIT ©