{"id":13495576,"url":"https://github.com/img-mapper/react-img-mapper","last_synced_at":"2025-03-28T16:32:56.255Z","repository":{"id":43358338,"uuid":"326046421","full_name":"img-mapper/react-img-mapper","owner":"img-mapper","description":"React Component to Highlight Interactive Zones in Images","archived":false,"fork":false,"pushed_at":"2025-01-26T20:33:41.000Z","size":2824,"stargazers_count":125,"open_issues_count":6,"forks_count":39,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-13T04:32:53.848Z","etag":null,"topics":["image-mapper","img-mapper","react-image-mapper","react-img-mapper"],"latest_commit_sha":null,"homepage":"https://img-mapper.github.io/react-img-mapper/","language":"TypeScript","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/img-mapper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-01-01T19:55:43.000Z","updated_at":"2025-03-01T11:04:28.000Z","dependencies_parsed_at":"2023-12-23T13:26:26.168Z","dependency_job_id":"c88d7112-4168-46f9-bf0d-85f00e7fb0e9","html_url":"https://github.com/img-mapper/react-img-mapper","commit_stats":{"total_commits":88,"total_committers":3,"mean_commits":"29.333333333333332","dds":0.07954545454545459,"last_synced_commit":"720805596df440b8bf0c701d5f9fc5cfd8d39740"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/img-mapper%2Freact-img-mapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/img-mapper%2Freact-img-mapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/img-mapper%2Freact-img-mapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/img-mapper%2Freact-img-mapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/img-mapper","download_url":"https://codeload.github.com/img-mapper/react-img-mapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246063077,"owners_count":20717739,"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":["image-mapper","img-mapper","react-image-mapper","react-img-mapper"],"created_at":"2024-07-31T19:01:36.107Z","updated_at":"2025-03-28T16:32:56.174Z","avatar_url":"https://github.com/img-mapper.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Img Mapper\n\n**React Component to Highlight Interactive Zones in Images**\n\n### Key Features:\n\n1. Actively maintained repository.\n2. Built with TypeScript.\n3. Fully compatible with Next.js.\n4. Optimized for smaller bundle size.\n5. Comprehensive documentation.\n6. Toggle and reset functionality for single and multiple highlighted areas.\n7. Access image properties (width, height, etc.) using the `onLoad` callback.\n8. Fully responsive image mapper.\n\n---\n\n## Installation\n\nInstall the package via your preferred package manager:\n\n```bash\n# npm\nnpm install react-img-mapper\n\n# yarn\nyarn add react-img-mapper\n\n# pnpm\npnpm install react-img-mapper\n```\n\n---\n\n## Demo \u0026 Examples\n\n**Live Demo:** [View Demo](https://img-mapper.github.io/react-img-mapper)\n\nTo run the example locally:\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/img-mapper/react-img-mapper.git\n   ```\n2. Install dependencies and start the dev server:\n   ```bash\n   pnpm playground:install\n   pnpm playground:dev\n   ```\n3. Open [`localhost:3000`](http://localhost:3000) in your browser.\n\nTo build the project, run:\n\n```bash\npnpm build\n```\n\n---\n\n## Usage\n\nHere’s how to integrate `react-img-mapper` into your project:\n\n```javascript\nimport React from 'react';\nimport ImageMapper from 'react-img-mapper';\n\nconst Mapper = () =\u003e {\n  const url =\n    'https://raw.githubusercontent.com/img-mapper/react-img-mapper/refs/heads/master/resources/example.jpg';\n  const name = 'my-map';\n  // GET JSON FROM BELOW URL AS AN EXAMPLE AND PUT IT HERE\n  const areas =\n    'https://raw.githubusercontent.com/img-mapper/react-img-mapper/refs/heads/master/resources/areas.json';\n\n  return \u003cImageMapper src={url} name={name} areas={areas} /\u003e;\n};\n\nexport default Mapper;\n```\n\n---\n\n## Properties\n\n| **Prop**         | **Type**                   | **Description**                                                   | **Default**                |\n| ---------------- | -------------------------- | ----------------------------------------------------------------- | -------------------------- |\n| `src`            | _string_                   | URL of the image to display                                       | **required**               |\n| `name`           | _string_                   | The name of the map, used to associate it with the image.         | **required**               |\n| `areas`          | _array_                    | Array of **area objects**, please check **Area Properties** below | **required**               |\n| `areaKeyName`    | _string_                   | Key name used to uniquely identify areas                          | `id`                       |\n| `isMulti`        | _bool_                     | Allows multiple areas to be highlighted                           | `true`                     |\n| `toggle`         | _bool_                     | Enables toggling highlights for selected areas                    | `false`                    |\n| `active`         | _bool_                     | Enables area listeners and highlighting                           | `true`                     |\n| `disabled`       | _bool_                     | Disable highlighting, listeners, and removes area tag             | `false`                    |\n| `fillColor`      | _string_                   | Fill color of highlighted zones                                   | `rgba(255, 255, 255, 0.5)` |\n| `strokeColor`    | _string_                   | Border color of highlighted zones                                 | `rgba(0, 0, 0, 0.5)`       |\n| `lineWidth`      | _number_                   | Border thickness of highlighted zones                             | `1`                        |\n| `imgWidth`       | _number_                   | Original width of the image                                       | `0`                        |\n| `width`          | _number \\| func =\u003e number_ | Image width (can use a function for dynamic sizing)               | `0`                        |\n| `height`         | _number \\| func =\u003e number_ | Image height (can use a function for dynamic sizing)              | `0`                        |\n| `natural`        | _bool_                     | Use original dimensions for canvas and wrapper                    | `false`                    |\n| `responsive`     | _bool_                     | Enable responsiveness (requires `parentWidth`)                    | `false`                    |\n| `parentWidth`    | _number_                   | Maximum width of the parent container for responsiveness          | `0`                        |\n| `containerProps` | _object_                   | Props for the container `\u003cdiv\u003e` element                           | `null`                     |\n| `imgProps`       | _object_                   | Props for the `\u003cimg\u003e` element                                     | `null`                     |\n| `canvasProps`    | _object_                   | Props for the `\u003ccanvas\u003e` element                                  | `null`                     |\n| `mapProps`       | _object_                   | Props for the `\u003cmap\u003e` element                                     | `null`                     |\n| `areaProps`      | _object_                   | Props for the `\u003carea\u003e` elements                                   | `null`                     |\n\n---\n\n## Callbacks\n\n| **Callback**       | **Triggered On**                    | **Signature**                   |\n| ------------------ | ----------------------------------- | ------------------------------- |\n| `onChange`         | Clicking an area                    | `(selectedArea, areas) =\u003e void` |\n| `onImageClick`     | Clicking outside of mapped zones    | `(event) =\u003e void`               |\n| `onImageMouseMove` | Moving the mouse over the image     | `(event) =\u003e void`               |\n| `onClick`          | Clicking a mapped zone              | `(area, index, event) =\u003e void`  |\n| `onMouseDown`      | Mouse down on a mapped zone         | `(area, index, event) =\u003e void`  |\n| `onMouseUp`        | Mouse up on a mapped zone           | `(area, index, event) =\u003e void`  |\n| `onTouchStart`     | Touching a mapped zone              | `(area, index, event) =\u003e void`  |\n| `onTouchEnd`       | Ending a touch on a mapped zone     | `(area, index, event) =\u003e void`  |\n| `onMouseMove`      | Moving the mouse over a mapped zone | `(area, index, event) =\u003e void`  |\n| `onMouseEnter`     | Hovering over a mapped zone         | `(area, index, event) =\u003e void`  |\n| `onMouseLeave`     | Leaving a mapped zone               | `(area, index, event) =\u003e void`  |\n| `onLoad`           | Image loaded and canvas initialized | `(event, dimensions) =\u003e void`   |\n\n---\n\n## Methods\n\n| **Method** | **Description**                                              |\n| ---------- | ------------------------------------------------------------ |\n| `getRefs`  | Retrieves refs for the container, canvas, and image elements |\n\n---\n\n## Areas Properties\n\n| **Property**   | **Type**          | **Description**                                                                                                                                                                                                                                                          | **Default**                |\n| -------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |\n| `id`           | _string_          | A unique identifier for the area. If not provided, an index from the array is used. This can be customized using the `areaKeyName` property.                                                                                                                             | based on `areaKeyName`     |\n| `shape`        | _string_          | Specifies the shape of the area: `rect`, `circle`, or `poly`.                                                                                                                                                                                                            | **required**               |\n| `coords`       | _array of number_ | Coordinates defining the area based on its shape: \u003cul\u003e\u003cli\u003e**rect**: `top-left-X, top-left-Y, bottom-right-X, bottom-right-Y`\u003c/li\u003e\u003cli\u003e**circle**: `center-X, center-Y, radius`\u003c/li\u003e\u003cli\u003e**poly**: List of points defining the polygon as `point-X, point-Y, ...`\u003c/li\u003e\u003c/ul\u003e | **required**               |\n| `active`       | _bool_            | Enables or disables event listeners and highlighting for the area.                                                                                                                                                                                                       | `true`                     |\n| `disabled`     | _bool_            | Disables all interactions, highlighting, and tag additions/removals for the area.                                                                                                                                                                                        | `false`                    |\n| `href`         | _string_          | A target link for clicks on the area. If an `onClick` handler is provided, the `href` will not be triggered.                                                                                                                                                             | `undefined`                |\n| `fillColor`    | _string_          | Fill color of the highlighted zone                                                                                                                                                                                                                                       | `rgba(255, 255, 255, 0.5)` |\n| `strokeColor`  | _string_          | Border color of the highlighted zone                                                                                                                                                                                                                                     | `rgba(0, 0, 0, 0.5)`       |\n| `lineWidth`    | _number_          | Border thickness of the highlighted zone                                                                                                                                                                                                                                 | `1`                        |\n| `preFillColor` | _string_          | Pre filled color of the highlighted zone                                                                                                                                                                                                                                 | `undefined`                |\n\nWhen triggered by an event handler, an area object includes the following additional properties:\n\n| **Property**   | **Type**          | **Description**                                                          |\n| -------------- | ----------------- | ------------------------------------------------------------------------ |\n| `scaledCoords` | _array of number_ | Scaled coordinates adjusted based on the image's dimensions.             |\n| `center`       | _array of number_ | The center or centroid coordinates of the area, represented as `[X, Y]`. |\n\n---\n\n## License\n\nDistributed with an MIT License. See LICENSE.txt for more details!\n\nCopyright (c) 2025 Nisharg Shah\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimg-mapper%2Freact-img-mapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimg-mapper%2Freact-img-mapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimg-mapper%2Freact-img-mapper/lists"}