Preserve space for your element to prevent browser reflow (layout shift)
Home Page: https://roderickhsiao.github.io/react-aspect-ratio/
License: MIT License
Hi, Roderick here. I'm a software architect based in San Francisco Bay Area.
Drop me a message if you want to discuss interesting web ideas, questions, or potentially fun project to work together :)
Open for tech talks invitations, project architecture consulting (web performance, large scale web app, team mentoring and more). Book your free discussion session with me at Calendly.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
devDependency react was updated from 16.8.6 to 16.9.0.devDependency react-dom was updated from 16.8.6 to 16.9.0.devDependency react-test-renderer was updated from 16.8.6 to 16.9.0.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the react group definition.
react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
<React.Profiler> API for gathering performance measurements programmatically. (@bvaughn in #15172)unstable_ConcurrentMode in favor of unstable_createRoot. (@acdlite in #15532)UNSAFE_* lifecycle methods. (@bvaughn in #15186 and @threepointone in #16103)javascript: URLs as a common attack surface. (@sebmarkbage in #15047)disablePictureInPicture attribute on <video>. (@eek in #15334)onLoad event for <embed>. (@cherniavskii in #15614)useState state from DevTools. (@bvaughn in #14906)setState is called from useEffect, creating a loop. (@gaearon in #15180)findDOMNode for components wrapped in <Suspense>. (@acdlite in #15312)!important style. (@acdlite in #15861 and #15882)act(async () => ...) for testing asynchronous state updates. (@threepointone in #14853)act from different renderers. (@threepointone in #16039 and #16042)act() call. (@threepointone in #15763 and #16041)act from the wrong renderer. (@threepointone in #15756)• react: https://unpkg.com/[email protected]/umd/
• react-art: https://unpkg.com/[email protected]/umd/
• react-dom: https://unpkg.com/[email protected]/umd/
• react-is: https://unpkg.com/[email protected]/umd/
• react-test-renderer: https://unpkg.com/[email protected]/umd/
• scheduler: https://unpkg.com/[email protected]/umd/
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
devDependency @storybook/react was updated from 5.3.13 to 5.3.14.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the storybook group definition.
storybook is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
typesVersions attribute (#9907)The new version differs by 41 commits.
91d9c0c v5.3.1401ab760 Update peer dependencies to 5.3.14bb222fa Prettier changelog1ddadfd 5.3.14 changelog5d2c9bf Merge pull request #9907 from storybookjs/fix-ts-export-for-addon-centered0395223 Merge pull request #9873 from storybookjs/9827-ts-default-values7ab4626 Merge pull request #9867 from storybookjs/websocket-cyclic-support57dd1e0 Merge pull request #9834 from davidgoli/support-jsx-preview-filesdd47540 Merge pull request #8897 from fraincs/#8504c25cb3f Merge pull request #9906 from SoloJiang/chore-supplement-raxd28e4a3 Merge pull request #9874 from dmartinjs/patch-31995d87 Merge pull request #9894 from davidenglishmusic/docs-configuration-file-typos654aeb9 Merge pull request #9885 from gaguirre/patch-3853c72a Merge pull request #9857 from pchr-srf/patch-4c2e39d2 Merge pull request #9844 from tskarhed/patch-4There are 41 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
i am having an error . Could not find a declaration file for module 'react-aspect-ratio'.
I'm using react-apsect-ratio v1.0.42 in a site built with Gatsby v2.24.50
I'm finding that when deploying the web site, the aspect-ratio.css file is not included (although it works when in development mode). This means that the aspect-ratio is not set properly, and the styled element collapses to zero height.
Searching for solutions, I found this: gatsbyjs/gatsby#19446
Essentially, this suggests that the CSS gets optimised away by Webpack. The work-around, which works for me, is to create a requirement for the CSS by not only importing it, but using the returned object somehow:
import rar from 'react-aspect-ratio/aspect-ratio.css';
console.log(rar); // work around overzealous dependency pruning
However, it says the problem stems from the consumed npm package declaring the CSS as side-effect free in package.json, which I see in react-aspect-ratio's package.json:
"sideEffects": false
Apparently, CSS should be declared to have side-effects like this:
"sideEffects": [
"*.css"
],
(As suggested on the webpack issue here: webpack/webpack#6741 (comment))
Thanks for your work react-aspect-ratio!
After the update package was broken
8.0.5 to 8.0.6.This version is covered by your current version range and after updating it in your project the build failed.
babel-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 11 commits.
62a8579 8.0.6cfb0ad8 Add node 125d5991a Minor change in docs to reflect new way of setting cacheDirectory. (#774)a53fc37 Update dependencies8d4353f Fix lint4c02657 Reduced memory usage (#781)f63f4d8 chore: migrate on pify (#785)5da4fa0 Update LICENSE858034b Remove babel 6 mentionsa015f5a Update dependencies3e2ba74 Fix babel stackoverflow link (#773)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hey, thanks for this component!
When running the latest version of this in preact, I get an error on https://github.com/roderickhsiao/react-aspect-ratio/blob/master/src/index.js#L53 - the variable isn't verified?
7.1.3 to 7.1.4.This version is covered by your current version range and after updating it in your project the build failed.
storybook-addon-jsx is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
6.2.1 to 6.2.2.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-jsx-a11y is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 102 commits.
057fb27 6.2.2fc56208 Merge pull request #615 from evcohen/changelog--v6.2.28c5f964 Changelog for v6.2.2f82fbcb Merge pull request #614 from evcohen/update--jsx-ast-utils1c3e63a Update jsx-ast-utils to v2.2.1c571293 Merge pull request #613 from evcohen/add-babel-to-dev-depsc398d3a Add @babel/cli to the dev dependencies13b370c Merge pull request #610 from evcohen/greenkeeper/flow-bin-0.102.0e28b81a Merge branch 'master' into greenkeeper/flow-bin-0.102.0e3163e3 Merge pull request #603 from evcohen/another-attempt-at-eslint-v6f121a78 Merge branch 'master' into another-attempt-at-eslint-v6f3de162 Merge pull request #611 from evcohen/update-jsx-ast-utils91f17be Update ESLint to v61eb9f19 Update jsx-ast-utils to 2.2.0313bc03 chore(package): update flow-bin to version 0.102.0There are 102 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
2.16.0 to 2.17.0.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 61 commits.
0499050 bump to v2.17.0f479635 [webpack] v0.11.18a4226d Merge pull request #1320 from bradzacher/export-ts-namespaces988e12b fix(export): Support typescript namespaces70c3679 [docs] make rule names consistent6ab25ea [Tests] skip a TS test in eslint < 4405900e [Tests] fix tests from #13192098797 [fix] export: false positives for typescript type + value export70a59fe [fix] Fix overwriting of dynamic import() CallExpressione4850df [ExportMap] fix condition for checking if block comment918567d [fix] namespace: add check for null ExportMap2d21c4c Merge pull request #1297 from echenley/ech/fix-isBuiltIn-local-aliases0ff1c83 [dev deps] lock typescript to ~, since it doesn’t follow semver40bf40a [*] [deps] update resolve28dd614 Merge pull request #1304 from bradennapier/feature/typescript-export-typeThere are 61 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
devDependency @storybook/react was updated from 5.0.10 to 5.0.11.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the storybook group definition.
storybook is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 2659 commits ahead by 2659, behind by 214.
269149b v5.1.0ab0e369 5.1.0 changelog5441456 Bump version to 5.1d477111 Merge pull request #6913 from zxl634/patch-1006615a Mention TSX index file requirement in README (#6887)db75c0a Update RN guide for 5.1 (#6977)4750688 Update RN guide for 5.176ab1b4 5.1.0-rc.5 next.json version filedb65f6c Update version.ts70d6fcd v5.1.0-rc.5bdefc16 5.1.0-rc.5 changelog829bf39 FIX race condition in startup of verdaccio && FIX typos (#6956)f43a9b2 FIX the customCanvas option (#6968)3dc444a WIP: Remove zonejs from devDeps; allow ^0.8.0 || ^0.9.0 (#6957)8792884 Merge pull request #6847 from CodeByAlex/feature/jest-design-changesThere are 250 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I'm receiving these warnings when I install the npm package:
npm WARN notsup Unsupported engine for [email protected]: wanted: {"npm":"^3.0.0 || ^5.0.0"} (current: {"node":"10.15.3","npm":"6.12.0"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
What is written in my package.json:
"react-aspect-ratio": "^1.0.41",Will the package be supported for npm V6?
Note: I might interpret this wrong as I don't know much about npm.
3.7.0 to 3.8.0.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-flowtype is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 1 commits.
397b7a1 feat: parse docblock more robustly for onlyFilesWithFlowAnnotation usage (#404)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
The following code won't work:
import { AspectRatio } from 'react-aspect-ratio';
<AspectRatio
ratio="4/5"
style={{
maxWidth: '600px',
backgroundImage: 'url(https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg)',
backgroundSize: 'cover'
}}
>...</AspectRatio>
This is the resulting output:
<div
class="react-aspect-ratio-placeholder"
style="max-width: 600px; background-image: url("https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg";);background-size: cover; --aspect-ratio:(0.8);"
>
...
</div>
But it just gets render like a regular div...
None of the examples provided work either! The package is properly installed. What am I missing?
Hey. Thanks for this great tiny library. When bundling entire app with Webpack I'm getting an error about unexpected usage of const in dist/es/index.js from UglifyJs. Could this be fixed to use var instead of const?
If add max-width attribute, there would be left alignment of the element. How to do central alignment?
7.14.0 to 7.14.1.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 3 commits.
62255af Update CHANGELOG and bump version655eb01 Merge pull request #2320 from golopot/issue-23199639d82 [Fix] prop-types: fix crash on multiple destructuringSee the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I apologize for my ignorance, but do I have to explicitly send the pre-calculated aspect ratio as a prop to this? I thought passing {1} would preserve the ratio that shows and adjust accordingly.
devDependency @babel/cli was updated from 7.4.4 to 7.5.0.devDependency @babel/core was updated from 7.4.5 to 7.5.0.devDependency @babel/plugin-proposal-class-properties was updated from 7.4.4 to 7.5.0.devDependency @babel/plugin-transform-flow-strip-types was updated from 7.4.0 to 7.4.4.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.
babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.