https://github.com/git-ced/solid-aspect-ratio

Easily add aspect ratio in your Solid app.
https://github.com/git-ced/solid-aspect-ratio

aspect-ratio solidjs

Last synced: about 1 month ago
JSON representation

Easily add aspect ratio in your Solid app.

• Host: GitHub
• URL: https://github.com/git-ced/solid-aspect-ratio
• Owner: git-ced
• License: mit
• Created: 2022-02-24T08:51:48.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-02-24T17:46:10.000Z (over 2 years ago)
• Last Synced: 2024-10-09T10:49:22.819Z (about 1 month ago)
• Topics: aspect-ratio, solidjs
• Language: TypeScript
• Homepage: https://solid-aspect-ratio.netlify.app/
• Size: 236 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



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

`ratio = width / height`

[![NPM](https://img.shields.io/npm/v/solid-aspect-ratio.svg)](https://www.npmjs.com/package/solid-aspect-ratio)

![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/solid-aspect-ratio)

![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/solid-aspect-ratio)

![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/solid-aspect-ratio)

![NPM](https://img.shields.io/npm/l/solid-aspect-ratio)

## Table of Contents

 - [Demo](#demo)

 - [Installation](#installation)

 - [Setup](#setup)

 - [Usage](#usage)

 - [Authors](#authors)

 - [Changelog](#changelog)

 - [License](#license)

 

## Demo

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

Source available in [example](example/)

## Installation

This library is available through the [npm registry](https://www.npmjs.com/).

NPM

```bash

$ npm -i solid-aspect-ratio

```

Yarn

```bash

$ yarn add solid-aspect-ratio

```

## Setup

Start using it by importing the library first.

### CommonJS

```javascript

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

```

or 

### ES6

```javascript

import AspectRatio from 'solid-aspect-ratio';

```

## Usage

Possible values for the ratio prop.

```javascript

import AspectRatio from 'solid-aspect-ratio';

export default function Sample() {

  return (

    

     // Same as "3/4"

     // Same as "3/4"

     // Same as "3/4"

  );

}

```

Using it with an image.

```javascript

  

```

You can check the [example](example/) folder for more usage examples.

## Authors

- [Prince Neil Cedrick Castro](https://github.com/git-ced/) - Initial work

See also the list of [contributors](https://github.com/git-ced/solid-aspect-ratio/contributors) who participated in this project.

## Changelog

[Changelog](https://github.com/git-ced/solid-aspect-ratio/releases)

## License

  [MIT](LICENSE)