https://github.com/idyll-lang/idyll-loader-component
An idyll component to manage asynchronous display and script loading
https://github.com/idyll-lang/idyll-loader-component
Last synced: about 1 month ago
JSON representation
An idyll component to manage asynchronous display and script loading
- Host: GitHub
- URL: https://github.com/idyll-lang/idyll-loader-component
- Owner: idyll-lang
- License: mit
- Created: 2017-04-14T17:33:32.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-08T13:51:23.000Z (almost 8 years ago)
- Last Synced: 2024-10-30T00:54:57.020Z (7 months ago)
- Language: JavaScript
- Homepage: https://idyll-lang.github.io/idyll-loader-component/examples/basic/build/
- Size: 2.49 MB
- Stars: 3
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [wip] idyll-loader-component
> An [idyll](https://github.com/idyll-lang/idyll) component to manage asynchronous display and script loading
## Introduction
This component helps manage asynchronous display so you don't have to block a whole page load for a complicated feature below the fold. It combines external script loading with visibility checking.
## Installation
***Not yet published.***
```bash
$ npm install idyll-loader-component
```
## Usage
To display content when it becomes visible:
```
[Loader scrollrange:100]
This is just ordinary text that shows up
when you scroll to within 100 pixels of it
[/Loader]
```
If you require a cdn script to display content, you can use the loader component to load it only when necessary:
```javascript
var Loader = require('idyll-loader-component')
var IdyllComponent = require('idyll-component')
class FeatureComponent extends IdyllComponent {
doSomethingComplex = () => {
// this is executed only *after* the cdn script
// has been loaded *and* when you're within 100
// pixels of viewing the element
}
render () {
return {...}}
renderError={msg => {...}}
/>
Children here...
}
}
```
If you have more that one of these components, the cdn script will only be loaded once.
## API
Props:
- `scrollwatch?: boolean`: When true, checks components for visibility. Otherwise loads immediately. Default is true.
- `scrollrange?: number`: range outside of the view at which components are deemed visible
- `loadScriptImmediately?: boolean `: When true, loads the script immediately. Otherwise defers load until component is displayed. Default is `false`
- `error?: string`: override the state of the component and force the display of an externally supplied error message
- `loaderStyles?: object`: When using default loader display, an object of overrides merge into the default styles
- `errorStyles?: object`: When using default error display, an object of overrides merge into the default styles
- `renderLoader?: function`: override the default loader with a custom element
- `renderError?: function(message: string)`: override the default error display with a custom element.
- `className?: string`: css class applied to element
- `style?: object`: object of styles