{"id":22382503,"url":"https://github.com/jcoreio/react-arrow","last_synced_at":"2025-09-25T22:21:34.945Z","repository":{"id":78315513,"uuid":"97038166","full_name":"jcoreio/react-arrow","owner":"jcoreio","description":"a simple svg arrow component","archived":false,"fork":false,"pushed_at":"2023-11-14T01:46:19.000Z","size":741,"stargazers_count":7,"open_issues_count":2,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T22:48:01.199Z","etag":null,"topics":["arrow","react","svg"],"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/jcoreio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-07-12T18:03:46.000Z","updated_at":"2023-04-20T12:12:11.000Z","dependencies_parsed_at":"2023-03-03T05:15:42.575Z","dependency_job_id":null,"html_url":"https://github.com/jcoreio/react-arrow","commit_stats":{"total_commits":204,"total_committers":4,"mean_commits":51.0,"dds":"0.19117647058823528","last_synced_commit":"bad4bda4d87b1dbe84bea6d9c4d378c1a47c6d61"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-arrow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-arrow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-arrow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-arrow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcoreio","download_url":"https://codeload.github.com/jcoreio/react-arrow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228209939,"owners_count":17885595,"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":["arrow","react","svg"],"created_at":"2024-12-05T00:13:16.234Z","updated_at":"2025-09-25T22:21:29.891Z","avatar_url":"https://github.com/jcoreio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-arrow\n\n[![Build Status](https://travis-ci.org/jcoreio/react-arrow.svg?branch=master)](https://travis-ci.org/jcoreio/react-arrow)\n[![Coverage Status](https://codecov.io/gh/jcoreio/react-arrow/branch/master/graph/badge.svg)](https://codecov.io/gh/jcoreio/react-arrow)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\na simple svg arrow component\n\n## Usage\n\n```sh\nnpm install --save react-arrow\n```\n\n```js\nimport React from 'react'\nimport Arrow from 'react-arrow'\n\nconst element = (\n  \u003cArrow\n    direction=\"down\"\n    shaftWidth={10}\n    shaftLength={10}\n    headWidth={30}\n    headLength={15}\n    fill=\"blue\"\n    stroke=\"red\"\n    strokeWidth={2}\n    onClick={() =\u003e alert('You clicked the arrow!')}\n  /\u003e\n)\n```\n\n## Geometry\n\n```\n\u003c----- head  width -----\u003e\n            ^                 ^\n           / \\                |\n          /   \\               |\n         /     \\              |\n        /       \\             |\n       /         \\\n      /           \\      head length\n     /             \\\n    /               \\         |\n   /                 \\        |\n  /                   \\       |\n /                     \\      |\n/___                 ___\\     v\n    |               |         ^\n    |               |         |\n    |               |         |\n    |               |         |\n    |               |\n    |               |    shaft length\n    |               |\n    |               |         |\n    |               |         |\n    |               |         |\n    |_______________|         v\n    \u003c- shaft width -\u003e\n```\n\n## Props\n\n##### `direction: 'left' | 'right' | 'up' | 'down' | 'leftRight' | 'upDown'` **(required)**\n\nThe direction you want the arrow to point\n\n##### `shaftWidth: number` **(required)**\n\nThe width of the arrow's shaft\n\n##### `shaftLength: number` **(required)**\n\nThe length of the arrow's shaft\n\n##### `headWidth: number` **(required)**\n\nThe width of the arrow's head (from one side of the triangle's base to the other)\n\n##### `headLength: number` **(required)**\n\nThe length of the arrow's head (from the base to the tip of the triangle)\n\n##### `unclosed: boolean`\n\nIf `true`, the path will be left unclosed.\n\n### Other SVG props\n\n_Most_ props applicable to the `\u003cpath\u003e` element will be passed down to it. Any other props besides the aforementioned\nprops will be passed down to the `\u003csvg\u003e` element. For the list of props that will be passed to the `\u003cpath\u003e` element,\nsee `pathProps` in the source code.\n\n### `stroke` note\n\nIf you provide a `stroke`, `Arrow` simulates the proposed `stroke-alignment: inside` property by doubling the\n`strokeWidth` and applying a `clip-path` with a unique id.\n\n### `transform` note\n\n`Arrow` doesn't currently go to the trouble to pick the correct `viewBox`, `style.width`, and `style.height` to fit the\narrow if you provide a `transform` property.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-arrow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcoreio%2Freact-arrow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-arrow/lists"}