# modularload
> Dead simple page transitions and lazy loading.
Latest version **1.2.8** (published 2021-08-24) · MIT license · 0 weekly downloads
## Install
```sh
npm install modularload
pnpm add modularload
yarn add modularload
bun add modularload
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.2.8 |
| Published | 2021-08-24 |
| First published | 2019-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 48.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 129 |
| Author | Antoine Boulanger |
| Maintainers | antoineboulanger, devenini |
## Links
- npm: https://www.npmjs.com/package/modularload
- Repository: https://github.com/modularorg/modularload
- Homepage: https://github.com/modularorg/modularload#readme
- Issues: https://github.com/modularorg/modularload/issues
- npm.io page: https://npm.io/package/modularload
## Recent versions
- 1.2.8 (latest) — 2021-08-24
- 1.2.7 — 2021-08-24
- 1.2.6 — 2020-09-08
- 1.2.5 — 2020-01-22
- 1.2.4 — 2019-12-10
- 1.2.3 — 2019-11-14
- 1.2.2 — 2019-06-05
- 1.2.1 — 2019-06-05
- 1.2.0 — 2019-05-31
- 1.1.9 — 2019-05-23
- 1.1.8 — 2019-05-23
- 1.1.7 — 2019-05-10
- 1.1.6 — 2019-05-06
- 1.1.5 — 2019-05-05
- 1.1.4 — 2019-05-01
- … 15 more at https://npm.io/package/modularload/versions
## README
modularLoad
Dead simple page transitions and lazy loading.
## Installation
```sh
npm install modularload
```
## Why
- Simple
- Lightweight
- Minimal configuration
- No dependencies
## Usage
```js
import modularLoad from 'modularload';
this.load = new modularLoad({
enterDelay: 300
});
```
```html
```
#### With custom transitions
```js
import modularLoad from 'modularload';
this.load = new modularLoad({
enterDelay: 300,
transitions: {
transitionName: {
enterDelay: 450
},
transitionTwoName: {
enterDelay: 600
}
}
});
```
```html
```
#### With custom container
```js
import modularLoad from 'modularload';
this.load = new modularLoad({
enterDelay: 600,
transitions: {
article: {
enterDelay: 300
}
}
});
```
```html
```
#### With lazy images
```js
import modularLoad from 'modularload';
this.load = new modularLoad();
```
```html
```
#### With events
```js
import modularLoad from 'modularload';
this.load = new modularLoad();
this.load.on('loaded', (transition, oldContainer, newContainer) => {
console.log('👌');
if (transition == 'transitionName') {
console.log('🤙');
}
});
```
#### With methods
```js
import modularLoad from 'modularload';
this.load = new modularLoad();
this.load.goTo('/page', 'transitionName');
```
## Options
| Option | Type | Default | Description |
| ------ | ---- | ------- | ----------- |
| `name` | `string` | `'load'` | Data attributes name |
| `loadingClass` | `string` | `'is-loading'` | Class when a link is clicked. |
| `loadedClass` | `string` | `'is-loaded'` | Class when the new container enters. |
| `readyClass` | `string` | `'is-ready'` | Class when the old container exits. |
| `transitionsPrefix` | `string` | `'is-'` | Custom transitions class prefix. |
| `transitionsHistory` | `boolean` | `true` | Redo the custom transitions while using the back button. |
| `enterDelay` | `number` | `0` | Minimum delay before the new container enters. |
| `exitDelay` | `number` | `0` | Delay before the old container exists after the new enters. |
| `loadedDelay` | `number` | `0` | Delay before adding the loaded class. For example, to wait for your JS DOM updates. |
| `transitions` | `object` | `{}` | Custom transitions options. |
## Attributes
| Attribute | Values | Description |
| --------- | ------ | ----------- |
| `data-load-container` | ` `, `string` | Container you want to load with optional string. |
| `data-load` | `string`, `false` | Transition name or disable transition. |
| `data-load-url` | `boolean` | Update url without loading container. |
| `data-load-src` | `string` | Lazy load src attribute. |
| `data-load-srcset` | `string` | Lazy load srcset attribute. |
| `data-load-style` | `string` | Lazy load style attribute. |
| `data-load-href` | `string` | Lazy load href attribute. |
## Events
| Event | Arguments | Description |
| ----- | --------- | ----------- |
| `loading` | `transition`, `oldContainer` | On link click. |
| `loaded` | `transition`, `oldContainer`, `newContainer` | On new container enter. |
| `ready` | `transition`, `newContainer` | On old container exit. |
| `images` | | On all images load. |
## Methods
| Method | Description |
| ------ | ----------- |
| `goTo('href'[, 'transition'][, true])` | Go to href. With optional transition name and boolean for url update only. |
---
_Source: https://npm.io/package/modularload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
Read more