Superimage

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

Demo

Table of Contents

• Overview
• Install
• Use
• License

Overview

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.

Install

npm i react-paella-superimage

{
  "dependencies": {
    "react-paella-superimage": "^2.0.0"
  }
}

Use

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 |

License

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

MIT