Is a tiny (≈ 650-750b) component to transform any input component into formatted or masked input.
- Dependency free
- Tiny (≈ 650b)
- Supports any input.
- Can mask input and format
import { Rifm } from 'rifm';
import { Value } from 'react-powerplug';
import TextField from '@material-ui/core/TextField';
import { css } from 'emotion';
const numberFormat = (str: string) => {
const r = parseInt(str.replace(/[^\d]+/gi, ''), 10);
return r ? r.toLocaleString('en') : '';
}
...
<Value initial
6633
={''}>
{text => (
<Rifm
value={text.value}
onChange={text.set}
format={numberFormat}
>
{({ value, onChange }) => (
<TextField
value={value}
label={'Float'}
onChange={onChange}
className={css({input: {textAlign:"right"}})}
type="tel"
/>
)}
</Rifm>
)}
</Value>
... yarn add rifm npm -i rifm@TrySound for incredible help and support on this