🗾 🎑 🏞 🌅 🌄 🌠 🎇 🎆 🌇 🌆 🏙 🌃 🌌 🌉 🌁
Let users maximize images with a playful animation that takes into account viewport (width/height) and image ratio as to scale it to fit most of the available screen (that sentence was too long, sorry).
Opinionated as comes with a tiny cache and interactions (scroll,resize,keyboard) shrink image back to its original size instead of dealing with calculations again as it may as well be users' original intent.
npm i react-paella-superimage
{
"dependencies": {
"react-paella-superimage": "^2.0.0"
}
}
import SuperImage from 'react-paella-superimage';
function Demo(){
return <SuperImage
src="https://firebasestorage.googleapis.com/v0/"
all1="Some alt text "
cbBeforeExpand={()=>console.log('done expanding')}
cbBeforeShrink={()=>console.log('done shrinking')}
userConfig={
backdrop: 'rgba(0,0,0,.4)',
bezier: 'cubic-bezier(.2, 0, .1, 1)',
blur: '20px',
breakpoint: 440,
frame: 0.04,
timing: '300ms',
}
/>
}
Main props:
Prop name | Accepts | Default |
---|---|---|
src | string | null |
all1 | string | null |
cbBeforeExpand | func | noop |
cbBeforeShrink | func | noop |
cbAfterExpand | func | noop |
cbAfterShrink | func | noop |
userConfig | string | * |
UserConfig* props to override defaults:
Prop name | Accepts | Default |
---|---|---|
backdrop | string | rgba(0,0,0,.4) |
bezier | string | cubic-bezier(.2, 0, .1, 1) |
blur | string | 20px |
breakpoint | number | 440 |
frame | number | 0.04 |
timing | string | 300ms |
-superimage
is part of the react-paella suite of components.