Vue Identify Network

• Identify the Internet Speed ⚡️ your users have.

• Demo Link -> Click Here

• This is on GitHub so let me know if I've b0rked it somewhere, give me a star :star: if you like it :beers:

Install

yarn add vue-identify-network

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

Usage

<template>
  <detected-speed>
    <span slot="unknown">
      REEE! Unable to identify your network type.
    </span>
    <span slot="slow">
      <img src="cat.gif" alt="you got slow internet">
    </span>
    <span slot="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>
    </span>
  </detected-speed>
</template>

<script>
import DetectedSpeed from 'vue-identify-network';

export default {
  components: {
    DetectedSpeed,
  },
};
</script>

API

Slots

• unknown: The slot to show when we are unable to identify network type (navigator.connection.effectiveType === "Unknown")
• slow: The slot to show when internet is slow (navigator.connection.effectiveType === "2g")
• fast: The slot to show when internet is fast (navigator.connection.effectiveType !== "2g")

Props

• unknownClass: Add your own classes to the div
• slowClass: Add your own classes to the div
• fastClass: Add your own classes to the div

Events

• network-type<type>: Emitted after network type is identified
• network-speed<downlink>: Emitted after network speed is identified

<detected-speed @network-type="handleNetworkIdentified" @network-speed="handleNetworkSpeed"></detected-speed>

function handleNetworkIdentified(type) {
  console.log('connection type: ', type);
}
function handleNetworkSpeed(speed) {
  console.log('downlink: ', speed);
}

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

Author

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

vinayak.pw · GitHub @vinayakkulkarni · Twitter @_vinayak_k