work in progress...

Context aware aspect ratio nanocomponent container.

Usage

var MonoContextual = require('monocontextual')

var monocon = new MonoContextual()
var child = document.createElement('div')
var element = monocon.render({ ratio: 75 }, child)

Details

monocontextual looks at the dimensions of it's parent and sizes itself to always fit within it while maintaining the correct aspect ratio. Typically you can (and should) just use intrinsic ratio containers, but sometimes you need an aspect ratio container which can also be limited by height.

monocontextual is meant as a container component, you should always pass a child element, (you'll usually want this child element to have 100% width and height).

monocontextual has an escape hatch for disabling it's functionality. This is particularly useful when you only need a contextual container at a certain browser width:

var element = monocon.render({
  ratio: 75,
  disabled: window.width <= 1024
}, child)

Todo

• [ ] Asserts
• [ ] Better docs?

See Also

• choojs/nanocomponent
• jongacnik/monolazy
• jongacnik/monoimage