# client-link

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

Latest version **1.0.1** (published 2018-10-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install client-link
pnpm add client-link
yarn add client-link
bun add client-link
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-10-05 |
| First published | 2018-10-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | TimUntersberger |
| Maintainers | baaka |

## Links

- npm: https://www.npmjs.com/package/client-link
- Repository: https://github.com/TimUntersberger/client-link
- Homepage: https://github.com/TimUntersberger/client-link#readme
- Issues: https://github.com/TimUntersberger/client-link/issues
- npm.io page: https://npm.io/package/client-link

## Recent versions

- 1.0.1 (latest) — 2018-10-05
- 1.0.0 — 2018-10-05

## README

# client-link

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

Client-link is a simple webcomponent for client side routing. 

The component uses the history api to update the url and dispatches the `pathchanged` event whenever the element is clicked.

It also adds the `active` class to itself when the url matches the path specified.


## Installation


`npm install client-link` or `yarn add client-link`

## Usage


**Note**: the recommended way of using client-link is together with [client-route](https://github.com/TimUntersberger/client-route).

html
```html
<script src="node_modules/client-link/index.js"></script>
<client-link to="/"> Home </client-route>
<client-link to="/about"> About </client-route>
```

listening for pathchanged events
```javascript
window.addEventListener("pathchanged", _ => {
    console.log(window.location.pathname);
})

```
## Attributes

### to
The url gets set to the path of the `to` attribute whenever the element is clicked.
```html
<client-route to="/"></client-route>
```

## Contributing


1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## License


[LICENSE](LICENSE)

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