Inferring Dimensions about react-content-loader HOT 4 CLOSED

Hey @MadsFrost, so sorry to hear you're facing such an issue.
Could you please paste here the snippet of what you're trying to do? And what is the visual result you want?

Thanks

from react-content-loader.

Hi @danilowoz, thanks for the swift reply.

I made a custom component for text, which just wraps any type of label/link with some default styles, forgive my awful recreation/explanation, but I want to somehow adapt the width and height to the size of that element (inferring dimensions - see attachment below code), right now it's a static width/height:

<div>
      <ContentLoader style={{ marginBottom: 5 }} width={'100%'} height={'20'}>
        <rect x='0' y='0' rx='9' ry='15' width={'100%'} height={'20'} />
      </ContentLoader>
</div>

A visual example of what I am interested in is how MUI-UI handles this problem. Is there any equivalent using React Content Loader :)?

I'm quite new to content loaders as well as TypeScript, but I am sure there must be somewhat of a use case for this in React Content Loader.

P.s, thank you for the awesome library, life-saver!

EDIT: Somewhat of a duplicate issue I believe, but can't find any resolutions: #123

from react-content-loader.

@danilowoz Any ideas to what could be done? It's unfortunately still an issue trying to get responsive skeleton sizes based on content.

from react-content-loader.

Hey @MadsFrost, here's an example of a responsive component: https://codesandbox.io/s/responsive-bf9qr
An SVG element needs a viewBox attribute to understand its ratio, and it should do the trick.

Unfortunately, rect doesn't support percentage values, so my suggestion is to use specific units (px) and then resize the SVG element with its proper viewBox.

Hope it solves your issue :D

from react-content-loader.