https://github.com/jcoreio/react-arrow
a simple svg arrow component
https://github.com/jcoreio/react-arrow
arrow react svg
Last synced: 9 months ago
JSON representation
a simple svg arrow component
- Host: GitHub
- URL: https://github.com/jcoreio/react-arrow
- Owner: jcoreio
- License: mit
- Created: 2017-07-12T18:03:46.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-11-14T01:46:19.000Z (over 2 years ago)
- Last Synced: 2024-04-14T22:48:01.199Z (about 2 years ago)
- Topics: arrow, react, svg
- Language: JavaScript
- Size: 724 KB
- Stars: 7
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-arrow
[](https://travis-ci.org/jcoreio/react-arrow)
[](https://codecov.io/gh/jcoreio/react-arrow)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
a simple svg arrow component
## Usage
```sh
npm install --save react-arrow
```
```js
import React from 'react'
import Arrow from 'react-arrow'
const element = (
alert('You clicked the arrow!')}
/>
)
```
## Geometry
```
<----- head width ----->
^ ^
/ \ |
/ \ |
/ \ |
/ \ |
/ \
/ \ head length
/ \
/ \ |
/ \ |
/ \ |
/ \ |
/___ ___\ v
| | ^
| | |
| | |
| | |
| |
| | shaft length
| |
| | |
| | |
| | |
|_______________| v
<- shaft width ->
```
## Props
##### `direction: 'left' | 'right' | 'up' | 'down' | 'leftRight' | 'upDown'` **(required)**
The direction you want the arrow to point
##### `shaftWidth: number` **(required)**
The width of the arrow's shaft
##### `shaftLength: number` **(required)**
The length of the arrow's shaft
##### `headWidth: number` **(required)**
The width of the arrow's head (from one side of the triangle's base to the other)
##### `headLength: number` **(required)**
The length of the arrow's head (from the base to the tip of the triangle)
##### `unclosed: boolean`
If `true`, the path will be left unclosed.
### Other SVG props
_Most_ props applicable to the `` element will be passed down to it. Any other props besides the aforementioned
props will be passed down to the `` element. For the list of props that will be passed to the `` element,
see `pathProps` in the source code.
### `stroke` note
If you provide a `stroke`, `Arrow` simulates the proposed `stroke-alignment: inside` property by doubling the
`strokeWidth` and applying a `clip-path` with a unique id.
### `transform` note
`Arrow` doesn't currently go to the trouble to pick the correct `viewBox`, `style.width`, and `style.height` to fit the
arrow if you provide a `transform` property.