ractive-image
v0.1.2
Published
A ractive component with baked in features like lazy loading, placeholders, and basic art-direction
Downloads
12
Maintainers
Readme
ractive-image
ractive-image is a Ractive component which sets out to grant a comfortable set of defaults, like:
- Lazy loading
- Placeholder images / boxes
- Best-fit art-direction
srcset
support (coming soon)
Demo
Check out this codepen for a demonstration using Waterfall.js
Installation
npm install ractive-image
Project Integration
Set up ractive-image like you would any other component.
Ractive.components[ "r-image" ] = require( "ractive-image" );
If not using modules, ractive-image will expose a RactiveImage
global.
Basic Usage
<r-image
id="imgProfAvatar"
height="150px"
width="150px"
placeholder="/v1/me/avatar?s=sample"
src="/v1/me/avatar?s=med" />
Events
select
Testing
For now, I'm manually testing initial features and small additions. Test scripts will be a requirement before launching v1.0.0
Contributing
Small project (and I'm new to writing public facing modules), so no preferences on contributions yet. PR's welcome, just name it something obvious.