[Issue]: How to format number in NumberInput

[alamenai]

Tremor Version

latest

Link to minimal reproduction

.

Steps to reproduce

I have a NumberInput and I want the German number format. In German, they use comma , instead of . fr their float numbers.

Code

 const handleNumberInputChange = (property: string, value: number) => {

   // Currently, the user enters numbers in this format 1.1 | 2.2
  // However, I want him that format 1,1 | 2,2
    dispatch(updatePanelMeasures({ ...measures, [property]: value }))
  }

 <NumberInput
          icon={TextQuote}
          placeholder='1.1'
          max={1}
          min={0.1}
          step={0.1}
          className='mt-2 min-h-11'
          value={measures.border}
          onValueChange={(border) => handleNumberInputChange("border", border)}
        />

What is expected?

.

What is actually happening?

.

What browsers are you seeing the problem on?

No response

Any additional comments?

No response

[CoHarsh]

This looks interesting. I am wondering whether to extend this to German number format or make this general. @christopherkindl

[hikinine]

Would be awesome if we receive as optional props an "formatter" which represents Intl.NumberFormat constructor https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat

So we separate the render value from the reference value

return (
   <NumberInput  
        defaultValue={123456.79}
        formatter={ new Intl.NumberFormat('en-US', { style: 'currency', currency: "USD" }) } 
    />
)

  DISPLAY VALUE:  '$123,456.79'
  REF VALUE:   123456.79

I am available to work on this if needed.

[severinlandolt]

Hi! @hikinine, this feature would be awesome! I assigned you to this, let me know if you need any help!

[hikinine]

Hi! @hikinine, this feature would be awesome! I assigned you to this, let me know if you need any help!

Wonderful, i'll keep you posted

[agustinzamar]

Hi! @hikinine I would love to have this feature, do you have any updates? Need an extra pair of hands to work on this?

[hikinine]

Hi! @hikinine I would love to have this feature, do you have any updates? Need an extra pair of hands to work on this?

Hey, would be good. I open a pull request with a initial try to implement it. Take a look. #1111 I got some problems with UX to do it in the best way possible (which is edit the formatted value like editing a number... something like we used to do with regex to represente some number pattern as string)

Implemented some work around which is not the best UX solution, but works.

Lets move the discussion to https://github.com/tremorlabs/tremor/pull/1111