33 |
34 |
35 |
Hovered: {hovered && {hovered}}
36 |
Focused: {focused && {focused}}
37 |
Clicked: {clicked && {clicked}}
38 |
-
58 |
React Vector Maps
59 |
60 | A React component for creating simple maps with interactive elements, 100+ maps ready for use and an
61 | online SVG to JSON converter for creating new maps.
62 |
63 |
64 |
65 | -
66 |
67 |
68 |
69 | }
70 | >
71 | 👋 Welcome!
72 |
73 | Below you'll find a getting start guide for using the package in your app.
74 | There is also a collection of 100+ maps that are ready to use with the component.
75 |
76 |
77 | You might be interested in some examples of how the component can be used and note
78 | that you can also turn your own SVG into a valid map with our converter.
79 |
80 | Stars on the project are always appreciated! 🙂
81 |
82 | To report an issue or contribute to the project please visit our{' '}
83 | Github.
84 |
85 |
86 |
87 |
88 | Getting started
89 | Install the package with either
90 |
91 | -
92 |
npm i @south-paw/react-vector-maps
93 |
94 | -
95 |
yarn add @south-paw/react-vector-maps
96 |
97 |
98 | You can then use the component as follows
99 |
100 | {`import { VectorMap } from '@south-paw/react-vector-maps';`}
101 |
102 |
103 | The VectorMapcomponent accepts a correctly structured object being spread onto it.
104 |
105 |
106 | You can download and save a valid JSON object from the maps page or you can create your
107 | own using our online SVG to JSON converter.
108 |
109 | When you've got your map file, just import it and then combine it with the component as follows:
110 | ;
115 | }
116 | }`}
117 | scope={{ VectorMap, worldLowRes }}
118 | />
119 |
120 | );
121 | }
122 |
--------------------------------------------------------------------------------
/docs/src/pages/maps.tsx:
--------------------------------------------------------------------------------
1 | import { graphql, HeadProps, Link, PageProps } from 'gatsby';
2 | import React from 'react';
3 | import { Layout } from '../components/Layout';
4 | import { Seo } from '../components/Seo';
5 |
6 | export function Head(props: HeadProps) {
7 | return