# @endgame/eva

> Ease Viewport Access

Latest version **1.0.8-alpha.0** (published 2021-12-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @endgame/eva
pnpm add @endgame/eva
yarn add @endgame/eva
bun add @endgame/eva
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8-alpha.0 |
| Published | 2021-12-21 |
| First published | 2020-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mental Breakdown |
| Maintainers | alphability |

## Links

- npm: https://www.npmjs.com/package/@endgame/eva
- Repository: https://github.com/MBDW-Studio/endgame
- Homepage: https://github.com/MBDW-Studio/endgame#readme
- Issues: https://github.com/MBDW-Studio/endgame/issues
- npm.io page: https://npm.io/package/@endgame/eva

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@endgame/calvin](https://npm.io/package/@endgame/calvin.md) ^1.0.8-alpha.0

## Recent versions

- 1.0.8-alpha.0 (latest) — 2021-12-21
- 1.0.7 — 2021-12-05
- 1.0.7-alpha.6 — 2021-09-11
- 1.0.7-alpha.5 — 2021-09-10
- 1.0.7-alpha.4 — 2021-09-09
- 1.0.7-alpha.3 — 2021-09-08
- 1.0.7-alpha.2 — 2021-08-28
- 1.0.7-alpha.1 — 2021-08-28
- 1.0.6-alpha.19 — 2021-08-28
- 1.0.6-alpha.18 — 2021-08-28
- 1.0.6-alpha.17 — 2021-08-27
- 1.0.6-alpha.16 — 2021-08-24
- 1.0.6-alpha.15 — 2021-08-24
- 1.0.6-alpha.14 — 2021-08-21
- 1.0.6-alpha.13 — 2021-08-20
- … 58 more at https://npm.io/package/@endgame/eva/versions

## README

# EVA

> EVA: Easy Viewport Access

## Installation

```sh
yarn add @endgame/eva
# or
npm i -S @endgame/eva
```

## The initialization

### Vanilla js users

```js
// Import the constructor
import { Eva } from '@endgame/eva';

// Ask EVA to help you 👌
const eva = new Eva();

/**
 * EVA will be at your disposal everywhere at:
 * 👉 window.$endgame.eva
 */
window.$endgame = {
  eva,
};
```

### Framework usage (example: Nuxt)

```js
// Import the constructor
import { Eva } from '@endgame/eva';

/**
 * If you're using Nuxt I recommend you
 * to do that in a plugin 🚀
 */
... global-plugin.client.js
const initializeEndgame = (_context, inject) => {
  inject('endgame', {
    eva: new Eva(),
  });
};
...

... YourComponent.vue
mounted() {
  /**
   * EVA will be at your disposal at:
   * 👉 this.$endgame.eva
   */
}
...
```

## The methods

### The _initialize_ method

With this method you'll:

👉 Initialize the window's resize event listener.

👉 Prepare EVA to be able to give you info on the viewport.

#### 🥚 Vanilla

```js
window.$endgame.eva.initialize();
```

#### 🍳 Nuxt

```js
... YourComponent.vue

beforeMount() {
  // 🚀 For Nuxt: preferably in layout/default.vue
  this.$endgame.eva.initialize();
},

...
```

### The _destroy_ method

The _destroy_ method will remove all watchers and the resize event listener.
Everything will be ready for garbage collection 👌

#### 🥚 Vanilla

```js
window.$endgame.eva.destroy();
```

#### 🍳 Vue.js

```js
... YourComponent.vue

beforeDestroy(){
  this.$endgame.eva.destroy();
},

...
```

## Access and watch viewport data

For purposes of listening to window's width, height changes, breakpoints updates, etc. you only need one method: _watch_.

```js
/**
 * width, height, outerWidth and outerHeight are built-in watchers.
 * With them you'll be able to listen to the window's resized values.
 */

// 🥚 Vanilla EVA access
const { eva } = window.$endgame;

// 🍳 Vue EVA access
// const { eva } = this.$endgame;

// Access the declared window reactive data
// SEE: @endgame/calvin
console.log(eva.viewport.data.width);
console.log(eva.viewport.data.height);
console.log(eva.viewport.data.outerWidth);
console.log(eva.viewport.data.outerHeight);

// Get notified any time the window's data are updated
eva.viewport.watch({
  width: (val) => {
    console.log(`window inner width: ${val}`);
  },
  height: (val) => {
    console.log(`window inner height: ${val}`);
  },
  outerWidth: (val) => {
    console.log(`window outer width: ${val}`);
  },
  outerHeight: (val) => {
    console.log(`window outer height: ${val}`);
  },
});
```

---
_Source: https://npm.io/package/@endgame/eva · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._