Squircle not recognizing correct size on initial render

[janwirth]

I need to resize the browser window to fix this.

using NextJS

[bring-shrubbery]

Hey @janwirth

Could you please provide a snippet of jsx and css you have around the place you have not working?

[janwirth]

Hey so I think the problem is due to images inside the frame taking their time to load / some content layout shift. Perhaps it's better to use a resize observer.

I think it should be reproducible by using

<Squircle><img src="some-slow-source"/></Squircle>

We are using squircles around our main container, so it's huge, rather than just a small icon / badge.

[bring-shrubbery]

Hmmm, I remember adding width/height overrides to the element, but somehow removed it in the end 🤔

I'll need to expose these props:

• defaultWidth - default width, but updates when size updates.
• defaultHeight- default height, but updates when size updates.
• width - overrides width, and disables resizing.
• height - overrides height, and disables resizing.

[bring-shrubbery]

@janwirth While I implement it back into the project, could you try setting the image width and height to the size that you expect it to take? This way the Squircle element should recognise the size of the content and calculate the correct size from the start.

[janwirth]

Hmm that's difficult because the image resizese dynamically based on the available space / it might also break into a new line.

[janwirth]

I will investigate the options though.

[bring-shrubbery]

Hmm, yes, I think having aspectRatio parameter would be extremely useful.

[bring-shrubbery]

Or maybe something like recheckOnStateChange={state} prop would solve this. But this would introduce an extra re-render on every state change, which is not something I'd like to just throw in the project for no reason.

[bring-shrubbery]

@janwirth I've published @squircle-js/react@1.1.0 with the width, height, defaultWidth, defaultHeight and asChild props. Check if you can make it work with these props available. Also, I've added a couple of examples to the website, so feel free to check them out too.

[janwirth]

Thank you, sorry for not replying. I tried the updated version but I remember there were still some issues. However, we are not using this anymore. Thank you for your support.