+ formatFloatingPointNumber(string, 2);\n\nconst Example = () \u002F*:React.Node*\u002F =\u003E {\n const [integer, setInteger] = React.useState('12345');\n const [negative, setNegative] = React.useState('12345');\n const [variableFloat, setVariableFloat] = React.useState('12345');\n const [fixedFloat, setFixedFloat] = React.useState('12345');\n\n return (\n \u003CGrid\u003E\n \u003Cdiv\u003E\n \u003Cdiv\u003EInteger number format: {integer}\u003C\u002Fdiv\u003E\n \u003CRifm\n accept={\u002F\\d\u002Fg}\n format={formatInteger}\n value={integer}\n onChange={value =\u003E setInteger(parseInteger(value))}\n \u003E\n {renderInput}\n \u003C\u002FRifm\u003E\n \u003C\u002Fdiv\u003E\n\n \u003Cdiv\u003E\n \u003Cdiv\u003ENegative number format: {negative}\u003C\u002Fdiv\u003E\n \u003CRifm\n accept={\u002F[\\d-]\u002Fg}\n format={formatNegative}\n value={negative}\n onChange={value =\u003E setNegative(parseNegative(value))}\n \u003E\n {renderInput}\n \u003C\u002FRifm\u003E\n \u003C\u002Fdiv\u003E\n\n \u003Cdiv\u003E\n \u003Cdiv\u003ENumber with fractional part: {fixedFloat}\u003C\u002Fdiv\u003E\n \u003CRifm\n accept={\u002F[\\d.]\u002Fg}\n format={v =\u003E formatFixedPointNumber(v, 2)}\n \u002F\u002F 00 is needed here see disadvantages comment at formatNumber\n value={`${fixedFloat}00`}\n onChange={value =\u003E setFixedFloat(parseNumber(value))}\n \u003E\n {renderInput}\n \u003C\u002FRifm\u003E\n \u003C\u002Fdiv\u003E\n\n \u003Cdiv\u003E\n \u003Cdiv\u003ENumber with variable fractional part: {variableFloat}\u003C\u002Fdiv\u003E\n \u003CRifm\n accept={\u002F[\\d.]\u002Fg}\n format={v =\u003E formatFloatingPointNumber(v, 2)}\n value={variableFloat}\n onChange={value =\u003E setVariableFloat(parseNumber(value))}\n \u003E\n {renderInput}\n \u003C\u002FRifm\u003E\n \u003C\u002Fdiv\u003E\n\n \u003Cdiv\u003E\n \u003Cdiv\u003ESquare meters number: {variableFloat}\u003C\u002Fdiv\u003E\n \u003CRifm\n accept={\u002F[\\d.]\u002Fg}\n format={formatMeters}\n value={variableFloat}\n onChange={value =\u003E setVariableFloat(parseNumber(value))}\n \u003E\n {renderInput}\n \u003C\u002FRifm\u003E\n \u003C\u002Fdiv\u003E\n\n \u003Cdiv\u003E\n \u003Cdiv\u003ECurrency number: {variableFloat}\u003C\u002Fdiv\u003E\n \u003CRifm\n \u002F\u002F $ need to be in regexp to prevent cursor jumping on backspace\n accept={\u002F[\\d.$]\u002Fg}\n format={formatCurrency}\n value={variableFloat}\n onChange={value =\u003E setVariableFloat(parseNumber(value))}\n \u003E\n {renderInput}\n \u003C\u002FRifm\u003E\n \u003C\u002Fdiv\u003E\n \u003C\u002FGrid\u003E\n );\n};\n\nconst renderInput = ({ value, onChange }) =\u003E (\n \u002F\u002F type=number is not allowed\n \u003Cinput\n type=\"tel\"\n style={{\n textAlign: 'right',\n width: '100%',\n height: 32,\n fontSize: 'inherit',\n boxSizing: 'border-box',\n }}\n value={value}\n onChange={onChange}\n \u002F\u003E\n);\n\nconst Grid = ({ children }) =\u003E {\n return (\n \u003Cdiv\n style={{\n display: 'grid',\n padding: 16,\n gap: 24,\n gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',\n alignItems: 'end',\n }}\n \u003E\n {children}\n \u003C\u002Fdiv\u003E\n );\n};\n\nif (typeof document !== 'undefined') {\n const root = document.getElementById('root');\n if (root) {\n ReactDOM.render(\u003CExample \u002F\u003E, root);\n }\n}\n\nexport default Example;\n","id":"mod_47afJaKH5mM8RY1muYuUah","is_binary":false,"title":"index.js","sha":null,"inserted_at":"2023-03-10T11:40:43","updated_at":"2023-03-10T11:40:43","upload_id":null,"shortid":"BkNrD5Oy2","source_id":"src_QRYpMH25goMQHmk1onRp8n","directory_shortid":null},{"code":"{\n \"description\": \"Rifm number format example\",\n \"dependencies\": {\n \"react\": \"16.8.6\",\n \"react-dom\": \"16.8.6\",\n \"rifm\": \"0.10.0\"\n }\n}\n","id":"mod_5izcWzKQLNVjizQorSM1h5","is_binary":false,"title":"package.json","sha":null,"inserted_at":"2023-03-10T11:40:43","updated_at":"2023-03-10T11:40:43","upload_id":null,"shortid":"BJlNHDqOkh","source_id":"src_QRYpMH25goMQHmk1onRp8n","directory_shortid":null}],"free_plan_editing_restricted":false};