Package Exports

vue-identify-network

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-identify-network) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-identify-network ⚡️

Features

Identify the Internet Speed ⚡️ your users have.
Built from scratch usign Vue 2 & Composition API with TypeScript
For Vue 2.x version – npm i vue-identify-network@2
For Vue 3.x version – npm i vue-identify-network@3

vue-identify-network ⚡️
- Features
- Table of Contents
- Demo
- Requirements
  - Installation
  - Build Setup
- Usage
  - Globally
    - As a component
    - As a plugin
  - Locally
    - Example
- API
  - Slots
  - Props
  - Events
- Built with
- Contributing
- Author

Demo

Requirements

vue ^2.x
@vue/composition-api ^1.x

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

TypeScript.
Vue 2

Contributing

Fork it ( https://github.com/vinayakkulkarni/vue-identify-network/fork )
Create your feature branch (git checkout -b feat/new-feature)
Commit your changes (git commit -Sam 'feat: add feature')
Push to the branch (git push origin feat/new-feature)
Create a new Pull Request

Note:

Please contribute using Github Flow
Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
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