react-usa-svg
v2.1.1
Published
React.js SVG-components for USA map
Downloads
8
Readme
Installation
NPM
npm i --save react-usa-svg
Yarn
yarn add react-usa-svg
Usage
// TypeScript
import { USA, USAProps } from "react-usa-svg";
function MyConponent(props: USAProps) {
return <USA {...props} />;
}
// JavaScript
import { USA } from "react-usa-svg";
function MyComponent(props) {
return <USA {...props} />;
}
Props and types
// Any US state abbreviature
type StatesAbbr = 'AL' | 'AK' | ... | "WY";
// Props passed directly to <USA /> component
type USAProps = {
// Extra control on every US state SVG renderer
HOC?: (props: {
renderer: React.FC<{
svg_props: React.SVGProps<SVGPathElement>;
}>;
svg_props?: SVGProps<SVGPathElement>;
abbr: StatesAbbr;
}) => JSX.Element;
// Want to get <path /> element props based on specific state?
getSVGProps?: (abbr: StatesAbbr) => SVGProps<SVGPathElement>;
// SVG filter elements will be rendered inside main <svg> component
SVGFilters?: Array<React.FC<React.SVGProps<SVGFilterElement>>>;
// Props for additional frames
framesStroke?: string;
framesStrokeWidth?: string | number;
};
Examples
Full Storybook code of GIF from top can be found HERE.
Or take a look at similar simplified example below:
import { USA, USAProps } from "react-usa-svg";
function SVGMapComponent() {
let [activeState, setActiveState] = React.useState(null);
let props: USAProps = {
SVGFilters: [
() => (
<filter id="filterDropShadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="1" />
</filter>
),
],
HOC: ({ renderer: Renderer, svg_props, abbr }) => {
let svg_props_override = {
onMouseEnter: () => {
setActiveState(abbr);
},
onMouseLeave: () => {
setActiveState(null);
},
fill: activeState === abbr ? `purple` : "green",
stroke: activeState === abbr ? `white` : undefined,
strokeWidth: activeState === abbr ? `2px` : undefined,
filter: activeState === abbr ? "url(#filterDropShadow)" : undefined,
};
return (
<Renderer
svg_props={{
...svg_props,
...svg_props_override,
}}
/>
);
},
};
return <USA {...props} />;
}