Support RTL animation about react-loading-skeleton HOT 7 CLOSED

I'd love to support this. I wonder if detecting that the document is using RTL and changing the animation direction automatically would work? E.g. by using https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

from react-loading-skeleton.

It will change only the element direction and not the animation

from react-loading-skeleton.

Since are you using animation CSS property, the only way to change the animation direction is to use animation-direction property.

Right now we can set that only on Skeleton component using className/style properties which will be repetitive if you are using many Skeleton components.

A better way to deal with that in my opinion is to set a new property (direction) on SkeletonTheme component and change the animation-direction value from normal to reverse according to direction value (rtl/ltr).

from react-loading-skeleton.

Ah sorry I didn't explain my idea well. I meant that we can modify the library so that it already comes with CSS that detects if a skeleton is in a rtl document (or section), and if so apply animation-direction: reverse by itself. This would maintain the ethos that the skeleton should automatically adapt to the contents of your page, rather than having to manually specify the direction in some another way. It seems that the :dir pseudo-selector I mentioned earlier has limited browser support, but if your page is using the dir HTML attribute then we could still make the idea work.

from react-loading-skeleton.

I opened a PR for it @dvtng #78, hopefully it will work

from react-loading-skeleton.

Hello @saadaouad @dvtng last open PR looks good to me, please merge it and issue will be fixed, we are waiting for rtl props to skeletontheme, Thanks!!

from react-loading-skeleton.

I had fixed this issue with this

${({theme:{isRTL}}) => isRTL && css`
    .react-loading-skeleton {
      animation-direction: reverse;
    }
  `}

from react-loading-skeleton.