{"id":13621342,"url":"https://github.com/strateos/react-map-interaction","last_synced_at":"2025-04-15T01:32:15.490Z","repository":{"id":39008435,"uuid":"109056666","full_name":"strateos/react-map-interaction","owner":"strateos","description":"Add map like zooming and dragging to any element","archived":false,"fork":false,"pushed_at":"2024-02-14T01:09:13.000Z","size":2487,"stargazers_count":346,"open_issues_count":63,"forks_count":69,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-10-28T17:21:21.217Z","etag":null,"topics":["maps","panning","react","zoom"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/strateos.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-31T22:00:22.000Z","updated_at":"2024-09-23T08:36:39.000Z","dependencies_parsed_at":"2023-02-14T16:45:29.864Z","dependency_job_id":"f6e5a14e-5584-4efc-899e-b4c63b65c274","html_url":"https://github.com/strateos/react-map-interaction","commit_stats":null,"previous_names":["transcriptic/react-map-interaction"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strateos%2Freact-map-interaction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strateos%2Freact-map-interaction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strateos%2Freact-map-interaction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strateos%2Freact-map-interaction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/strateos","download_url":"https://codeload.github.com/strateos/react-map-interaction/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223654607,"owners_count":17180543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["maps","panning","react","zoom"],"created_at":"2024-08-01T21:01:04.944Z","updated_at":"2024-11-08T08:30:38.173Z","avatar_url":"https://github.com/strateos.png","language":"JavaScript","readme":"# react-map-interaction\n\nAdd map like zooming and panning to any React element. This works on both touch devices (pinch to zoom, drag to pan) as well as with a mouse or trackpad (wheel scroll to zoom, mouse drag to pan).\n\n![example zooming map](./example.gif)\n\n## Install\n```bash\nnpm install --save react-map-interaction\n```\n\n## Usage\n\n### Basic\n```js\nimport { MapInteractionCSS } from 'react-map-interaction';\n\n// This component uses CSS to scale your content.\n// Just pass in content as children and it will take care of the rest.\nconst ThingMap = () =\u003e {\n  return (\n    \u003cMapInteractionCSS\u003e\n      \u003cimg src=\"path/to/thing.png\" /\u003e\n    \u003c/MapInteractionCSS\u003e\n  );\n}\n```\n\n### Usage without CSS\n```js\nimport { MapInteraction } from 'react-map-interaction';\n\n// Use MapInteraction if you want to determine how to use the resulting translation.\nconst NotUsingCSS = () =\u003e {\n  return (\n    \u003cMapInteraction\u003e\n      {\n        ({ translation, scale }) =\u003e { /* Use the passed values to scale content on your own. */ }\n      }\n    \u003c/MapInteraction\u003e\n  );\n}\n```\n\n### Controlled\n```js\nimport { MapInteractionCSS } from 'react-map-interaction';\n\n// If you want to have control over the scale and translation,\n// then use the `scale`, `translation`, and `onChange` props.\nclass Controlled extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: {\n        scale: 1,\n        translation: { x: 0, y: 0 }\n      }\n    };\n  }\n\n  render() {\n    const { scale, translation } = this.state;\n    return (\n      \u003cMapInteractionCSS\n        value={this.state.value}\n        onChange={(value) =\u003e this.setState({ value })}\n      \u003e\n        \u003cimg src=\"path/to/thing.png\" /\u003e\n      \u003c/MapInteractionCSS\u003e\n    );\n  }\n}\n```\n\n### Controlled vs Uncontrolled\nSimilar to React's `\u003cinput /\u003e` component, you can either control the state of MapInteraction\nyourself, or let it handle that for you. It is not recommended, however, that you change\nthis mode of control during the lifecycle of a component. Once you have started controlling\nthe state, keep controlling it under you unmount MapInteraction (likewise with uncontrolled).\nIf you pass `value` prop, we assume you are controlling the state via a `onChange` prop.\n\n### Click and drag handlers on child elements\nThis component lets you decide how to respond to click/drag events on the children that you render inside of the map. To know if an element was clicked or dragged, you can attach onClick or onTouchEnd events and then check the `e.defaultPrevented` attribute. MapInteraction will set `defaultPrevented` to `true` if the touchend/mouseup event happened after a drag, and false if it was a click. See `index.stories.js` for an example.\n\n## Prop Types for MapInteractionCSS (all optional)\nMapInteraction doesn't require any props. It will control its own internal state, and pass values to its children. If you need to control the scale and translation then you can pass those values as props and listen to the onChange event to receive updates.\n```js\n{\n  value: PropTypes.shape({\n    // The scale applied to the dimensions of the contents. A scale of 1 means the\n    // contents appear at actual size, greater than 1 is zoomed, and between 0 and 1 is shrunken.\n    scale: PropTypes.number,\n    // The distance in pixels to translate the contents by.\n    translation: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),    \n  }),\n\n  defaultValue: PropTypes.shape({\n    scale: PropTypes.number,\n    translation: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),\n  }),\n\n  // Stops user from being able to zoom, but will still adhere to props.scale\n  disableZoom: PropTypes.bool,\n\n  // Stops user from being able to pan. Note that translation can still be\n  // changed via zooming, in order to keep the focal point beneath the cursor. This prop does not change the behavior of the `translation` prop.\n  disablePan: PropTypes.bool,\n\n  // Apply a limit to the translation in any direction in pixel values. The default is unbounded.\n  translationBounds: PropTypes.shape({\n    xMin: PropTypes.number, xMax: PropTypes.number, yMin: PropTypes.number, yMax: PropTypes.number\n  }),\n\n  // Called with an object { scale, translation }\n  onChange: PropTypes.func,\n\n  // The min and max of the scale of the zoom. Must be \u003e 0.\n  minScale: PropTypes.number,\n  maxScale: PropTypes.number,\n\n  // When 'showControls' is 'true', plus/minus buttons are rendered\n  // that let the user control the zoom factor\n  showControls: PropTypes.bool,\n\n  // Content to render in each of the control buttons (only when 'showControls' is 'true')\n  plusBtnContents: PropTypes.node,\n  minusBtnContents: PropTypes.node,\n\n  // Class applied to the controls wrapper (only when 'showControls' is 'true')\n  controlsClass: PropTypes.string,\n\n  // Class applied to the plus/minus buttons (only when 'showControls' is 'true')\n  btnClass: PropTypes.string,\n\n  // Classes applied to each button separately (only when 'showControls' is 'true')\n  plusBtnClass: PropTypes.string,\n  minusBtnClass: PropTypes.string,\n};\n```\n\n## Prop Types for MapInteraction (all optional)\n```js\n{\n  // Function called with an object { translation, scale }\n  // translation: { x: number, y: number }, The current origin of the content\n  // scale:       number, The current multiplier mapping original coordinates to current coordinates\n  children: PropTypes.func,\n\n  // The rest of the prop types are the same as MapInteractionCSS\n  ...MapInteractionCSS.propTypes,\n}\n```\n\n## Development\nPlease feel free to file issues or put up a PR.\nNote the node version in .nvmrc file.\n\n```\n$ yarn install\n```\n\n```\n$ yarn test\n```\n\n```\n$ yarn run storybook\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrateos%2Freact-map-interaction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstrateos%2Freact-map-interaction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrateos%2Freact-map-interaction/lists"}