{"id":23033934,"url":"https://github.com/freenowtech/react-polygon-editor","last_synced_at":"2025-08-14T15:33:43.293Z","repository":{"id":98691484,"uuid":"220497951","full_name":"freenowtech/react-polygon-editor","owner":"freenowtech","description":"Create, edit and display polygon in your React application","archived":false,"fork":false,"pushed_at":"2024-01-10T16:14:46.000Z","size":12037,"stargazers_count":13,"open_issues_count":5,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-09-24T09:18:59.624Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/freenowtech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-11-08T15:44:59.000Z","updated_at":"2023-07-27T08:47:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"f8e41136-cbf9-4b89-8a28-66d953f91064","html_url":"https://github.com/freenowtech/react-polygon-editor","commit_stats":{"total_commits":29,"total_committers":8,"mean_commits":3.625,"dds":0.6206896551724138,"last_synced_commit":"2cb156bd9320b1811c69acbafad8745d95892a8b"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freenowtech%2Freact-polygon-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freenowtech%2Freact-polygon-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freenowtech%2Freact-polygon-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freenowtech%2Freact-polygon-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freenowtech","download_url":"https://codeload.github.com/freenowtech/react-polygon-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229843384,"owners_count":18132900,"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":[],"created_at":"2024-12-15T16:28:07.186Z","updated_at":"2024-12-15T16:28:07.821Z","avatar_url":"https://github.com/freenowtech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @freenow/react-polygon-editor\n\n### Table of contents\n\n-   About\n-   Getting started\n-   Components\n-   How to run locally\n-   Contribution\n\n### About\n\nReact Polygon Editor provides react components for displaying and editing polygons.\nWe use leaflet for rendering maps. And typescript to provide a strongly typed interface.\n\n### Getting started\n\nFirst install @freenow/react-polygon-editor:\n\n```bash\nnpm i -S @freenow/react-polygon-editor\n```\n\nMake sure you have also installed all peer dependencies. Have a look at [package.json](package.json) for more information.\n\n```bash\nnpm i -S react react-dom react-leaflet leaflet styled-components\n```\n\ninject the leaflet css style.\n\n```typescript\nImport 'leaflet/dist/leaflet.css';\n```\n\nYou can also link the css style from a CDN in your index.html\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.4.0/dist/leaflet.css\" /\u003e\n```\n\n### Components\n\n##### PolygonDraw\n\n**Props**\n\n-   **polygon**: _Coordinate[] | Coordinate[][]_ (Single or list of polygons to render)\n-   **activeIndex**?: _number_ (index of currently active polygon, can be omitted when only one polygon exists. **Default value: 0**)\n-   **highlightedIndex**?: _number_ (index of the polygon that should be highlighted.)\n-   **boundary**?: _Coordinate[]_\n-   **initialCenter**?: _Coordinate_ (The initial center will be used to localize the map on the first render if no polygon or boundary polygon were provided)\n-   **initialZoom**?: _number_ (The initial zoom will be used to localize the map on the first render if no polygon or boundary polygon were provided)\n-   **editable**?: _boolean_ (Allows enabling and disabling polygon editing. **Default value: true**)\n-   **onChange**?: _(polygonCoordinates: Coordinate[], isValid: boolean) =\u003e void_\n-   **onClick**?: _(index: number) =\u003e void_ (called with the index of the polygon that was clicked on)\n-   **onMouseEnter**?: _(index: number) =\u003e void_ (called with the index of the polygon that was entered)\n-   **onMouseLeave**?: _(index: number) =\u003e void_ (called with the index of the polygon that was left)\n\nThe initialCenter and initialZoom props are applicable only when both the polygon and the boundary coordinates are empty.\nThis flow explains which parameters are used to focus the map:\n\n![Focus flow](map_focus_flow.png)\n\nFor more details, have a look at the Component definition in [PolygonDraw](src/PolygonDraw/PolygonDraw.tsx)\n\n### How to run locally\n\nYou can run the library locally. We use [storybook](https://storybook.js.org/) to illustrate what can be done with the components.\n\nSimply run:\n\n```bash\nnpm i \u0026\u0026 npm start\n```\n\n### Contribution\n\n1. Discuss the contribution with the maintainers\n2. Make sure the the code is well tested and adheres to code convention\n3. Create a pull request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreenowtech%2Freact-polygon-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreenowtech%2Freact-polygon-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreenowtech%2Freact-polygon-editor/lists"}