🗾 🎑 🏞 🌅 🌄 🌠 🎇 🎆 🌇 🌆 🏙 🌃 🌌 🌉 🌁

Demo

• Overview
• Install
• Use
• License

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:

UserConfig* props to override defaults:

-superimage is part of the react-paella suite of components.

MIT