turkey-district-maps-3
Version:
A SVG district maps of Turkey cities for React JS applications.
107 lines (75 loc) • 5.16 kB
Markdown
# Turkey District Maps React Component
> A SVG district maps of Turkey cities for React JS applications.
[](https://www.npmjs.com/package/turkey-district-maps-3) [](https://standardjs.com) [](https://www.npmjs.com/package/react)
## 🌏 Open in the Cloud
Click any of the buttons below to start a new development environment to demo or contribute to the codebase without having to install anything on your machine:
[](https://vscode.dev/github/ritzykey/turkey-district-map)
[](https://codesandbox.io/p/sandbox/example-turkey-district-maps-9qcxyk)
## Install
```bash
npm install turkey-district-maps-3
```
## Usage
```jsx
import { Istanbul, Ankara } from 'turkey-district-maps-3'
const App = () => (
<>
<Istanbul />
<Ankara />
</>
)
```
### Handling events
On click example:
```jsx
<Istanbul onClick={({ name }) => console.log(name + ' is just clicked!')} />
```
On mouse over example:
```jsx
<Istanbul
onHover={({ name }) => console.log('Cursor is over on ' + name + '!')}
/>
```
### District component wrapping
```jsx
<Istanbul
distWrapper={(distComponent, distData) => (
<Tooltip title={distData.name} key={distData.name}>
{distComponent}
</Tooltip>
)}
/>
```
This is generally used for [Antd](https://ant.design/components/tooltip/) style _Tooltip_.
## API
### Types
| Type | Description |
| :---------------- | :----------------------------------------------------------------------------------- |
| _distDataType_ | { **name**: _string_, **distPath**: _string_ } |
| _viewBoxType_ | { **top**: _number_, **left**: _number_, **width**: _number_, **height**: _number_ } |
| _customStyleType_ | { **idleColor**: _string_, **hoverColor**: _string_ } |
| _strokeStyleType_ | { **strokeWidth**: _string_, **strokeColor**: _string_ } |
### props
| Property | Description | Type | Default |
| :---------- | :--------------------------------------------------------- | :----------------------------------------------------------------------------------- | :------------------------------------------------------------------- |
| distWrapper | District DOMs are wrapped by provided component. | ( **cityComponent**: _JSX.Element_, **distData** : _distDataType_ ) => _JSX.Element_ | _Unwrapped district_ |
| onClick | Event when a district clicked on the map. | ( **district** : _distDataType_ ) => _void_ | - |
| onHover | Event when a district hovered on the map. | ( **district** : _distDataType_ ) => _void_ | - |
| customStyle | Stylizing the component. | _customStyleType_ | { **idleColor**: _#444_, **hoverColor**: _#dc3522_ } |
| strokeStyle | Stylizing the component. | _strokeStyleType_ | { **strokeWidth**: _0.08_, **strokeColor**: _white_ } |
| viewBox | Position and dimension information of the map (svg) layout | _viewBoxType_ | { **top**: _30_, **left**: _75_, **width**: _74_, **height**: _45_ } |
| hidden | Defines the visibility of the component | _boolean_ | _false_ |
## Development
Local development is broken into two parts (ideally using two tabs).
First, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.
```bash
npm start # runs rollup with watch flag
```
The second part will be running the `example/` create-react-app that's linked to the local version of your module.
```bash
# (in another tab)
cd example
npm start # runs create-react-app dev server
```
## License
MIT © [ritzykey](https://github.com/ritzykey)