Is there a way to control Alignment?

[carpben]

I've build an app that uses the component multiple times. Great work!
I personally use the app with two languages - English, and another language which is aligned to the right. By default the text-areas align to the left. If I want to change and align them to the right I can simply press right CTR+Shift. When the screen re-renders it is aligned to the left again. I want to somehow control the alignment - recognize if a user chooses to align in a certain way, and save it to the state. How can I recognize how the user chooses to align the text, or if he presses right or left CTR+Shift? And how do I change the text-area so the alignment is controlled?

[FrancescoCioria]

Hi @carpben and thank you, I'm very happy to hear that you're using our component in your application :)

I'm not sure what CTR+Shift does, but you can force a website to be in "right-to-left" mode by passing dir="rtl" to the HTML tag.

If you want to set only TextareaAutosize in "right-to-left" mode you can pass dir="rtl" directly to it:

<TextareaAutosize dir="rtl" />

I tested it in our live demo and it worked great:

EDIT:

And how do I change the text-area so the alignment is controlled?

you can force it back to "left-to-right" with dir="ltr"

How can I recognize how the user chooses to align the text, or if he presses right or left CTR+Shift?

I think the only way would be to use getComputedStyle:

<TextareaAutosize innerRef={ref => this.textarea = ref} />

function isRtL() {
  const { direction } = getComputedStyle(this.textarea) // "ltr" or "rtl"
  return direction === "rtl"
}