Add object-fit util #95
Conversation
|
|
||
| This util mimics the CSS property `object-fit` for all HTML elements; | ||
|
|
||
| It exports two reusable methods: `contain` and `cover`. Given the sizes of an parent element and its |
There was a problem hiding this comment.
| It exports two reusable methods: `contain` and `cover`. Given the sizes of an parent element and its | |
| It exports two reusable methods: `contain` and `cover`. Given the sizes of a parent element and its |
| This util mimics the CSS property `object-fit` for all HTML elements; | ||
|
|
||
| It exports two reusable methods: `contain` and `cover`. Given the sizes of an parent element and its | ||
| child element: Contain returns the size to be applied to the element to let it fits its parent and |
There was a problem hiding this comment.
| child element: Contain returns the size to be applied to the element to let it fits its parent and | |
| child element: Contain returns the size to be applied to the element to let it fit its parent and |
| Contain: | ||
|
|
||
| With the contain method you can use both position absolute and relative on the child element. | ||
| Relative can be useful if you want to position elements inside absolute to the parent. |
There was a problem hiding this comment.
Relative can be useful if you want to position elements inside absolute
That sounds a bit strange? :)
|
|
||
| const objectFit = contain(parentRef.current.offsetWidth, parentRef.current.offsetHeight, 1, 1); | ||
|
|
||
| childRef.current.style.cssText += objectFit.cssText; |
There was a problem hiding this comment.
Even though this is just an example, it could happen that if the parentRef changes, it appends the new cssText to an existing element.
I was thinking the csstext would be used to assign to the JSX with the style tag, but unfortunately that receives an object, and not a text string.
I wonder if it would be useful to have an example like:
const { x: left, y: top, width, height } = contain(parentRef.current.offsetWidth, parentRef.current.offsetHeight, 1, 1);
<div
ref={childRef}
style={{ position: 'relative', outline: '1px solid blue', left, top, width, height }}
/>Or maybe have a cssObj returned with those 4 renamed style props, so it can be used in a similar way to cssText;
Benefit over JSX is that it sets the individual style props (left, top, etc), instead of working with a "dumb" string.
There was a problem hiding this comment.
You're having two tests, one for cover, one for contain.
Both tests have the exact same input, and the exact same output.
How can you be 100% sure, from this tests, that both versions work correctly? :)
| }); | ||
| }); | ||
|
|
||
| it('throws an error for non-positive input arguments', () => { |
There was a problem hiding this comment.
Technically, 0 is positive.
Maybe reword (and also in other places) to "greater than 0" ?
ThaNarie
requested review from
leroykorterink,
hjeti,
jesse-mm,
larsvanbraam and
ReneDrie
| childWidth: number, | ||
| childHeight: number, | ||
| ): { x: number; y: number; width: number; height: number; scale: number; cssText: string } => { | ||
| if ([parentWidth, parentHeight, childWidth, childHeight].some((value) => value <= 0)) { |
There was a problem hiding this comment.
Using logical operators will be significantly faster compared to Array.some.
if (parentWidth <= 0 || parentHeight <= 0 || childWidth <= 0 || childHeight <= 0) {
throw new Error(`All arguments should have a positive value`);
}
After using this utility in various projects I thought it would be handy to have it added here.
The util can imitate the CSS
object-fitfunctionally or it do calculations to draw images on canvas element.