A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/vinayakkulkarni/vue-identify-network/tree/v2.0.0 below:

GitHub - vinayakkulkarni/vue-identify-network at v2.0.0

vue-identify-network ⚡️

Features Table of Contents Demo

Requirements Installation 
npm install --save vue-identify-network
npm install --save-dev @vue/composition-api

CDN: UNPKG | jsDelivr (available as window.VueIdentifyNetwork)

Build Setup 
# install dependencies
$ npm ci

# package the library
$ npm run build
Usage Globally As a component 
Vue.component('VueIdentifyNetwork', require('vue-identify-network'));
As a plugin 
import Vue from 'vue';
import VueIdentifyNetwork from 'vue-identify-network';

Vue.use(VueIdentifyNetwork);
Locally 
import { VueIdentifyNetwork } from 'vue-identify-network';
Example Locally imported as a component 
<vue-identify-network
  @network-type="handleNetworkIdentified"
  @network-speed="handleNetworkSpeed"
>
  <template #unknown>
    REEE! Unable to identify your network type.
  </template>
  <template #slow>
    <img src="cat.gif" alt="you got slow internet" />
  </template>
  <template #fast>
    <video width="400" controls>
      <source src="mov_bbb.mp4" type="video/mp4" />
      <source src="mov_bbb.ogg" type="video/ogg" />
      Your browser does not support HTML5 video.
    </video>
  </template>
</vue-identify-network>
import { VueIdentifyNetwork } from 'vue-identify-network';

Vue.component('example-component', {
  components: {
    VueIdentifyNetwork
  },
  setup() {
    function handleNetworkIdentified(type: string) {
      console.log('connection type: ', type);
    }
    function handleNetworkSpeed(speed: number) {
      console.log('downlink: ', speed);
    }
  }
});
API Slots Name Description unknown Named slot for when the type of connection is unidentifyable slow Named slot for when navigator.connection.effectiveType === '2g' fast Named slot for when navigator.connection.effectiveType !== '2g' Props Name Type Required? Default Description unknown-class String No null Styling the div which you want to give if network type is undetected. slow-class String No null Styling the div which you want to give if network type is slow. fast-class String No null Styling the div which you want to give if network type is fast. Events Name Returns Description @network-type String Emits a string value @network-speed String Emits a number value Built with Contributing
  1. Fork it ( https://github.com/vinayakkulkarni/vue-identify-network/fork )
  2. Create your feature branch (git checkout -b feat/new-feature)
  3. Commit your changes (git commit -Sam 'feat: add feature')
  4. Push to the branch (git push origin feat/new-feature)
  5. Create a new Pull Request

Note:

  1. Please contribute using Github Flow
  2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
  3. PS. Ensure your commits are signed. Read why
Author

vue-identify-network © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4