# dom-arrow

> [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/dom-arrow) # dom-arrow

Latest version **0.0.12** (published 2022-01-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install dom-arrow
pnpm add dom-arrow
yarn add dom-arrow
bun add dom-arrow
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2022-01-08 |
| First published | 2021-07-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 350.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web_components, web_component, custom-elements, custom-element, arrow, connector, leader-line |

## Links

- npm: https://www.npmjs.com/package/dom-arrow
- Repository: https://github.com/bahrus/dom-arrow
- Homepage: https://github.com/bahrus/dom-arrow#readme
- Issues: https://github.com/bahrus/dom-arrow/issues
- npm.io page: https://npm.io/package/dom-arrow

## Dependencies (4)

- [be-loaded](https://npm.io/package/be-loaded.md) 0.0.31
- [leader-line](https://npm.io/package/leader-line.md) 1.0.5
- [trans-render](https://npm.io/package/trans-render.md) 0.0.445
- [xtal-element](https://npm.io/package/xtal-element.md) 0.0.458

## Recent versions

- 0.0.12 (latest) — 2022-01-08
- 0.0.11 — 2022-01-08
- 0.0.10 — 2022-01-08
- 0.0.9 — 2022-01-08
- 0.0.8 — 2022-01-08
- 0.0.7 — 2021-08-24
- 0.0.6 — 2021-07-20
- 0.0.5 — 2021-07-19
- 0.0.4 — 2021-07-12
- 0.0.3 — 2021-07-12
- 0.0.2 — 2021-07-11
- 0.0.1 — 2021-07-11
- 0.0.0 — 2021-07-09

## README

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/dom-arrow)
# dom-arrow

<a href="https://nodei.co/npm/ib-id/"><img src="https://nodei.co/npm/dom-arrow.png"></a>

<img src="https://badgen.net/bundlephobia/minzip/dom-arrow">

dom-arrow is a web component wrapper around the [leader-line npm package](https://www.npmjs.com/package/leader-line).

The name / idea of this web component was inspired by [this library](https://www.cssscript.com/connect-elements-directional-arrow/) which helpfully [links](https://www.cssscript.com/draw-svg-paths-two-elements-leader-line/) to a [rather powerful library called leader-line](https://www.npmjs.com/package/leader-line).

## Sample syntax

```html
<div id=start>Hello</div>
<p>
    Euclid [described](https://en.wikipedia.org/wiki/Line_(geometry)) a line as "breathless length" which "lies equally with respect to the points on itself"; 
    he introduced several postulates as basic unprovable properties from which he constructed all of geometry, 
    which is now called Euclidean geometry to avoid confusion with other geometries which 
    have been introduced since the end of the 19th century (such as non-Euclidean, projective and affine geometry).
</p>
<div id=end>Goodbye</div>

<dom-arrow connect=#start to=#end color=green></dom-arrow>
```

## Demo

[Codepen demo](https://codepen.io/bahrus/pen/LYybPVP)


<!--
```
<custom-element-demo>
<template>
<div id=start>Hello</div>
<p>
    Euclid [described](https://en.wikipedia.org/wiki/Line_(geometry)) a line as "breathless length" which "lies equally with respect to the points on itself"; 
    he introduced several postulates as basic unprovable properties from which he constructed all of geometry, 
    which is now called Euclidean geometry to avoid confusion with other geometries which 
    have been introduced since the end of the 19th century (such as non-Euclidean, projective and affine geometry).
</p>
<div id=end>Goodbye</div>
<dom-arrow connect=#start to=#end color=green></dom-arrow>
<script type=module crossorigin>
    import 'https://cdn.skypack.dev/dom-arrow@0.0.1?min'
</script>
</template>
</custom-element-demo>
</template>
</custom-element-demo>
```
-->


## Running locally

1.  Do a git clone or a git fork of repository https://github.com/bahrus/dom-arrow
2.  Install node.js
3.  Run "npm install" from location of folder created in step 1.
4.  Run npm run serve.  Open browser to http://localhost:3030/demo/dev.html

---
_Source: https://npm.io/package/dom-arrow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._