search

s-yadav / react-number-format

React component to format numbers in an input or as a text.
MIT License
3.89k stars 410 forks source link

RTL Problem #294

Open mehranabi opened 5 years ago

mehranabi commented 5 years ago

Hello, Thanks for this amazing library... In a part of my app, I'm using NumberFormat to format Iranian Card Number which is a 16-digit number, separated 4 by 4 - like "1234-5678-9012-3456"... But when I use this library in RTL mode, I get reverse of that number like: "3456-9012-5678-1234". Check out this screenshot: Sketch (5) IN IMAGE: "Card Number: 0000-5678-0000-1234" but it should be "Card Number: 1234-0000-5678-000" Also, I'm using Material-UI as my UI library and followed all rules to implement RTL correctly. And It's my code to show that Card Number:

<Typography variant="body1" color="textSecondary" gutterBottom>
    شماره کارت:{' '}
    <Typography inline variant="body1">
          <NumberFormat
                value="1234000045670000"
                displayType={'text'}
                format="####-####-####-####"
           />
     </Typography>
</Typography>
premier213 commented 2 years ago

add direction ltr to formatNumber like this: 

<NumberFormat
dir="ltr
value="1234000045670000"
displayType={'text'}
format="####-####-####-####"
/>