RTL support

[726b]

When using ripplet in RTL container, the ripple X position is off. This can be fixed with adding a 'direction' option:

export const defaultOptions = {
  ...
  direction: 'ltr' as string | null, // ltr as default
}

and then changing line 117 to:

/^rtl$/i.test(options.direction!) ? rippletStyle.marginRight = `${targetRect.right - clientX - radius}px` : rippletStyle.marginLeft = `${clientX - targetRect.left - radius}px`

[luncheon]

Thank you for reporting.

I have confirmed that the problem reproduces. https://codepen.io/luncheon/pen/MWKrYxa

I prefer to fix it without adding any options if possible. I think the following is sufficient to check if a container is RTL.

• if appendTo: body (default), check if getComputedStyle(document.body).direction === 'rtl'
• if appendTo: parent, check if getComputedStyle(currentTarget.parentElement).direction === 'rtl'

If you have any thoughts, please comment.

[726b]

That's even better!

By the way, forgot to say, ripplet is a very nice package ― thank you for a great job.

[luncheon]

v0.2.1 that fixes this issue has been released! If it hasn't been fixed in your case, please reopen this issue.