# dash-lazy-load

> Dash implementation of react-lazyload

Latest version **1.2.1** (published 2019-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install dash-lazy-load
pnpm add dash-lazy-load
yarn add dash-lazy-load
bun add dash-lazy-load
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2019-02-26 |
| First published | 2018-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 592.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Michael Clawar |
| Maintainers | mjclawar |

## Links

- npm: https://www.npmjs.com/package/dash-lazy-load
- Repository: https://github.com/mjclawar/dash-lazy-load
- Issues: https://github.com/mjclawar/dash-lazy-load/issues
- npm.io page: https://npm.io/package/dash-lazy-load

## Dependencies (8)

- [builder](https://npm.io/package/builder.md) ^3.2.2
- [webpack](https://npm.io/package/webpack.md) ^3.8.1
- [copyfiles](https://npm.io/package/copyfiles.md) ^1.2.0
- [ify-loader](https://npm.io/package/ify-loader.md) ^1.1.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.2
- [react-lazyload](https://npm.io/package/react-lazyload.md) ^2.3.0
- [dash-components-archetype](https://npm.io/package/dash-components-archetype.md) ^0.2.11

## Recent versions

- 1.2.1 (latest) — 2019-02-26
- 1.1.0 — 2018-06-11
- 1.0.0 — 2018-03-29

## README

# dash-lazy-load

Large dash apps taking forever to initially render on page load? `dash-lazy-load` wraps Dash components with lazy loading that only render in the page when scrolled or resized into view!

This package creates a Dash wrapper around the excellent [`react-lazyload`](https://github.com/jasonslylvia/react-lazyload) package.

### Get started
`$ pip install dash-lazy-load`

To get simple lazy loading set up, the only change necessary is to wrap a Dash components with `dash_lazy_load.LazyLoad`. 

```python

import dash_lazy_load
import dash
import dash_html_components as html

app = dash.Dash('')

app.scripts.config.serve_locally = True


app.layout = html.Div([
    html.Div('Testing', style=dict(height=1200)),
    dash_lazy_load.LazyLoad(
        html.Div('I loaded in lazily!!', style=dict(border='5px solid blue')),
        height=500,
        debounce=1000)
])


if __name__ == '__main__':
app.run_server(debug=True)
```

![Lazy Load Example](https://github.com/mjclawar/dash-lazy-load/blob/master/LazyLoadExample.gif)
The blue border component loads in after a debounce period on scroll(!)

### Dash

Go to this link to learn about [Dash][].

## Dash help

See the [dash-components-archetype][] repo for more information.

## Contributing
To set up the development environment:

```shell
$ npm install
# Run webpack to create the Dash React bundle
$ npm run build-dist
# Set up a virtualenv
$ virtualenv venv -p python3
$ source venv/bin/activate
# Install the local Py
$ npm run install-local
```

### Running a local server
Run `usage.py` in the virtual environment
```
$ source venv/bin/activate
$ python usage.py
```

[Dash]: https://github.com/plotly/dash
[dash-components-archetype]: https://github.com/plotly/dash-components-archetype

### Contributors
[@mjclawar](https://github.com/mjclawar)
[@wchaering](https://github.com/wchaering)

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