+ 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}],"git":{"path":"codesandboxes\u002Fnumber-format","branch":"gh-pages","repo":"rifm","username":"realadvisor","commit_sha":"cb873df6771637fdf868b9c9f25a084079afb7d7"},"fork_count":100,"free_plan_editing_restricted":false,"tags":[],"team":null,"source_id":"src_QRYpMH25goMQHmk1onRp8n","like_count":0,"screenshot_url":"https:\u002F\u002Fscreenshots.codesandbox.io\u002Frppcn\u002F1.png","user_liked":false,"ai_consent":false,"preview_secret":null,"is_frozen":false,"v2":false,"permissions":{"prevent_sandbox_export":false,"prevent_sandbox_leaving":false},"pr_number":null,"description":"Rifm number format example","forked_from_sandbox":null,"alias":"realadvisor-rifm-number-format-rppcn","forked_template_sandbox":null,"inserted_at":"2020-03-26T09:53:03","feature_flags":{"comments":false,"container_lsp":false},"sdk":false,"settings":{"ai_consent":null,"use_pint":false},"always_on":false,"original_git_commit_sha":null,"version":1,"template":"create-react-app","custom_template":{"id":"sbtempl_Em6GWdVDEZ7x1ZFUAHFZfn","title":"realadvisor\u002Frifm: number-format","v2":false,"color":"#61DAFB","url":null,"published":false,"sdk":false,"icon_url":"github","official":false},"entry":"index.js","authorization":"read","title":"realadvisor\u002Frifm: number-format","privacy":0,"forked_template":null,"id":"rppcn","base_git":null,"draft":true,"original_git":null,"view_count":129596,"room_id":null,"owned":false};