update required! ))

[HaykMkrtich]

Hello I have case where I need to wrap other compoennts inside the skeleton. It'd be better if you add optional children props to Skeleton component so I could wrap my component inside skeloton. In the attached screenshot you can see what case I have. It's dropdown skeleton.

I could implement this with a custom wrapper or with custom component but as in project already used this library i want to use it in all skeletons. That's why I need this update. Thanks have a good day.

[srmagura]

So you want the entire gray box in your screenshot to have the animated highlight?

I can look into how involved it would be to implement this.

Edit: Have you considered just adding the react-loading-skeleton class to one of your elements? You could put whatever you want inside that element and still benefit from our CSS which does the animation.

[HaykMkrtich]

Thanks I'll try to add class and I'll let you know does it solve my problem or no. )

[HaykMkrtich]

@srmagura Hi!. It helped thanks. Now I have other problem, I use SkeletonTheme to change skeleoton color in whole project but in this case with using class react-loading-skeleton it keeps default color. To change color for this single case I added new class where changed --base-color and --highlight color. But in the future if i need to change to other color I'll need to change it both places in SkeletonTheme and in my custom class. Is there any way to change it in one place?.

[srmagura]

Hey @HaykMkrtich, if you are using the react-loading-skeleton class directly, the only thing you need to do is change the --base-color and --highlight-color CSS variables. I don't think you need to use SkeletonTheme at all.

[HaykMkrtich]

@srmagura yeah I know but In whole project there is a lot of skeletons it's easy to use SkeletonTheme to set color for all skeletons. Only in one place I need to use react-loading-skeleton class. And for that case I changed colors with --base-color and --highlight-color in css. Anyway my problem is solved. I'm just trying to avoid overwriting global styles inside css files or inlne stiles, it would be better if SkeletonTheme change globile style. Now as I see it adds inline styles to skeleton elements. That's whiy all skeleton comopnents have the color provided by SkeletonTheme but the div element with react-loading-skeleton class doesn't have color which provided by SkeletonTheme. It's a minor priority thing, you can leave it the way is it. Thanks)