https://github.com/vilherda/connectionstatus-webcomponent
Web component which helps to detect if the browser has connectivity or not
https://github.com/vilherda/connectionstatus-webcomponent
component connection status web webcomponent
Last synced: about 1 month ago
JSON representation
Web component which helps to detect if the browser has connectivity or not
- Host: GitHub
- URL: https://github.com/vilherda/connectionstatus-webcomponent
- Owner: vilherda
- License: cc0-1.0
- Created: 2020-10-04T21:37:07.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-10-23T14:52:20.000Z (over 5 years ago)
- Last Synced: 2025-05-20T12:53:48.475Z (about 1 year ago)
- Topics: component, connection, status, web, webcomponent
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Connection Status Web Component
## Description
Web component wich helps to detect if the browser has connectivity or not
## HOWTO use
### Example with plain HTML
See 'demo.html'.
### Example with Vue 2
On `main.js`:
```javascript
...
import { ConnectionStatus } from 'connectionstatus-webcomponent';
...
Vue.component('connection-status', ConnectionStatus);
...
new Vue({
render: h => h(App),
}).$mount('#app');
```
On `somecomponent.vue`:
Inside `` section:
```html
...
...
Connection status : {{ onlineStatus }}
...
```
Inside `` section:
```javascript
...
data() {
return {
...
onlineStatus: false,
...
};
},
...
methods: {
...
connectionStatusHandler(event) {
this.onlineStatus = event.detail;
},
...
}
...
```
### Example with Vue 3
On `main.js`:
```javascript
...
import { ConnectionStatus } from 'connectionstatus-webcomponent';
...
const app = createApp(App);
...
app.component('connection-status', ConnectionStatus);
...
app.use(...).use(...).mount('#app');
```
On `somecomponent.vue`:
Inside `<template>` section:
```html
...
<connection-status @connection-status-changed="connectionStatusHandler">
</connection-status>
...
<h2>Connection status : {{ onlineStatus }}</h2>
...
```
Inside `<script>` section:
```javascript
...
data() {
return {
...
onlineStatus: false,
...
};
},
...
methods: {
...
connectionStatusHandler(event) {
this.onlineStatus = event.detail;
},
...
}
...
```