solid-aspect-ratio
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

solid-aspect-ratio

Creates a component with a proportional relationship between its width and height.

ratio = width / height

Internally, TailwindCSS to achieve the intended aspect ratio.

NPM npm bundle size (scoped) npm bundle size (scoped version) Libraries.io dependency status for latest release, scoped npm package NPM

Table of Contents

Demo

https://solid-aspect-ratio.netlify.app/

Source available in example

Installation

This library is available through the npm registry.

NPM

$ npm -i solid-aspect-ratio

Yarn

$ yarn add solid-aspect-ratio

Setup

Start using it by importing the library first.

CommonJS

const AspectRatio = require('solid-aspect-ratio');

or

ES6

import AspectRatio from 'solid-aspect-ratio';

Usage

import AspectRatio from 'solid-aspect-ratio';

export default function Sample() {
  return (
    <AspectRatio ratio="3/4" />
    <AspectRatio ratio="3:4" /> // Same as "3/4"
    <AspectRatio ratio={3/4} /> // Same as "3/4"
    <AspectRatio ratio={0.75} /> // Same as "3/4"
  );
}

Authors

See also the list of contributors who participated in this project.

Changelog

Changelog

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i solid-aspect-ratio

Weekly Downloads

5

Version

0.2.1

License

MIT

Unpacked Size

17.9 kB

Total Files

22

Last publish

Collaborators

  • princedev