https://github.com/timuntersberger/client-link

The official repository of the webcomponent client-link
https://github.com/timuntersberger/client-link

Last synced: about 2 months ago
JSON representation

The official repository of the webcomponent client-link

• Host: GitHub
• URL: https://github.com/timuntersberger/client-link
• Owner: TimUntersberger
• License: mit
• Created: 2018-10-05T15:12:20.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-05T15:55:02.000Z (over 6 years ago)
• Last Synced: 2024-10-12T14:09:22.947Z (3 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

 Home 

 About 

```

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

```

## 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)