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: 10 months 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 (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-24T17:46:10.000Z (almost 4 years ago)
- Last Synced: 2025-03-29T21:41:22.571Z (11 months 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`
[](https://www.npmjs.com/package/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)