{"id":14965830,"url":"https://github.com/kdeloach/react-lineto","last_synced_at":"2025-04-12T18:50:08.031Z","repository":{"id":39500384,"uuid":"81902805","full_name":"kdeloach/react-lineto","owner":"kdeloach","description":"Draw a line between two elements in React","archived":false,"fork":false,"pushed_at":"2024-01-09T08:12:18.000Z","size":1310,"stargazers_count":234,"open_issues_count":23,"forks_count":64,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-03T21:12:56.538Z","etag":null,"topics":["react","yarn"],"latest_commit_sha":null,"homepage":"","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/kdeloach.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-14T03:55:42.000Z","updated_at":"2025-04-03T02:20:59.000Z","dependencies_parsed_at":"2024-06-18T13:51:10.436Z","dependency_job_id":"9bcfb4fd-62d1-412b-8804-aa13e03f09c0","html_url":"https://github.com/kdeloach/react-lineto","commit_stats":{"total_commits":95,"total_committers":15,"mean_commits":6.333333333333333,"dds":"0.27368421052631575","last_synced_commit":"1a72d511f1701c01a6a2ac1ec28d79a556c1073a"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdeloach%2Freact-lineto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdeloach%2Freact-lineto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdeloach%2Freact-lineto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdeloach%2Freact-lineto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kdeloach","download_url":"https://codeload.github.com/kdeloach/react-lineto/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618219,"owners_count":21134199,"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":["react","yarn"],"created_at":"2024-09-24T13:35:26.585Z","updated_at":"2025-04-12T18:50:08.009Z","avatar_url":"https://github.com/kdeloach.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-lineto\n\nDraw a line between two elements in React.\n\n[![Build Status](https://app.travis-ci.com/kdeloach/react-lineto.svg?branch=master)](https://app.travis-ci.com/kdeloach/react-lineto)\n\n## Getting Started\n\n```\nyarn install\nyarn run demo\n```\n\nBrowse to [localhost:4567](http://localhost:4567).\n\n## Demo\n\n![Demo](https://github.com/kdeloach/react-lineto/raw/master/preview.png)\n\n## Components\n\n* [LineTo](#lineto)\n* [SteppedLineTo](#steppedlineto)\n* [Line](#line)\n\n### LineTo\n\nDraw line between two DOM elements.\n\n#### Example\n\n```\nimport LineTo from 'react-lineto';\n\nfunction render() {\n    return (\n        \u003cdiv\u003e\n            \u003cdiv className=\"A\"\u003eElement A\u003c/div\u003e\n            \u003cdiv className=\"B\"\u003eElement B\u003c/div\u003e\n            \u003cLineTo from=\"A\" to=\"B\" /\u003e\n        \u003c/div\u003e\n    );\n}\n```\nIf using multiple instances of `\u003cLineTo /\u003e` inside separate components, you must provide a unique key for each of the container divs.\n\n\n#### Properties\n\n| Name        | Type   | Description                                    | Example Values\n| ----------- | ------ | ---------------------------------------------- | --------------\n| borderColor | string | Border color                                   | `#f00`, `red`, etc.\n| borderStyle | string | Border style                                   | `solid`, `dashed`, etc.\n| borderWidth | number | Border width (px)                              |\n| className   | string | Desired CSS className for the rendered element |\n| delay       | number or bool | Force render after delay (ms)          | `0`, `1`, `100`, `true`\n| fromAnchor  | string | Anchor for starting point (Format: \"x y\")      | `top right`, `bottom center`, `left`, `100% 0`\n| from\\*      | string | CSS class name of the first element            |\n| toAnchor    | string | Anchor for ending point (Format: \"x y\")        | `top right`, `bottom center`, `left`, `100% 0`\n| to\\*        | string | CSS class name of the second element           |\n| within      | string | CSS class name of the desired container        |\n| zIndex      | number | Z-index offset                                 |\n\n\\* Required\n\n### SteppedLineTo\n\nDraw stepped line between two DOM elements.\n\n#### Example\n\n```\nimport { SteppedLineTo } from 'react-lineto';\n\nfunction render() {\n    return (\n        \u003cdiv\u003e\n            \u003cdiv className=\"A\"\u003eElement A\u003c/div\u003e\n            \u003cdiv className=\"B\"\u003eElement B\u003c/div\u003e\n            \u003cSteppedLineTo from=\"A\" to=\"B\" orientation=\"v\" /\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n#### Properties\n\n| Name        | Type   | Description                                    | Example Values\n| ----------- | ------ | ---------------------------------------------- | --------------\n| borderColor | string | Border color                                   | `#f00`, `red`, etc.\n| borderStyle | string | Border style                                   | `solid`, `dashed`, etc.\n| borderWidth | number | Border width (px)                              |\n| className   | string | Desired CSS className for the rendered element |\n| delay       | number or bool | Force render after delay (ms)          | `0`, `1`, `100`, `true`\n| fromAnchor  | string | Anchor for starting point (Format: \"x y\")      | `top right`, `bottom center`, `left`, `100% 0`\n| from\\*      | string | CSS class name of the first element            |\n| orientation | enum   | \"h\" for horizonal, \"v\" for vertical            | `h` or `v`\n| toAnchor    | string | Anchor for ending point (Format: \"x y\")        | `top right`, `bottom center`, `left`, `100% 0`\n| to\\*        | string | CSS class name of the second element           |\n| within      | string | CSS class name of the desired container        |\n| zIndex      | number | Z-index offset                                 |\n\n\\* Required\n\n### Line\n\nDraw line using pixel coordinates (relative to viewport).\n\n#### Example\n\n```\nimport { Line } from 'react-lineto';\n\nfunction render() {\n    return (\n        \u003cLine x0={0} y0={0} x1={10} y1={10} /\u003e\n    );\n}\n```\n\n#### Properties\n\n| Name        | Type   | Description                                    | Example Values\n| ----------- | ------ | ---------------------------------------------- | --------------\n| borderColor | string | Border color                                   | `#f00`, `red`, etc.\n| borderStyle | string | Border style                                   | `solid`, `dashed`, etc.\n| borderWidth | number | Border width (px)                              |\n| className   | string | Desired CSS className for the rendered element |\n| within      | string | CSS class name of the desired container        |\n| x0\\*        | number | First X coordinate                             |\n| x1\\*        | number | Second X coordinate                            |\n| y0\\*        | number | First Y coordinate                             |\n| y1\\*        | number | Second Y coordinate                            |\n| zIndex      | number | Z-index offset                                 |\n\n\\* Required\n\n## Release Checklist\n\n1. Bump version in `package.json`\n1. Update `CHANGELOG.md`\n1. Run `yarn build` or `./scripts/update`\n1. Create version commit (ex. \"2.0.0\")\n1. Create matching tag (ex. \"2.0.0\")\n1. Push `master` branch and tags to origin\n1. Verify Travis CI published NPM package\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkdeloach%2Freact-lineto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkdeloach%2Freact-lineto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkdeloach%2Freact-lineto/lists"}