@piplup/rhf-adaptersreact-number-formatComponents
NumberFormatBaseElement
A pre-integrated NumberFormatBaseElement component for low-level formatted inputs with React Hook Form.
Import
import { NumberFormatBaseElement } from "@piplup/rhf-adapters/react-number-format";Usage
"use client";import Stack from "@mui/material/Stack";import { NumberFormatBaseElement } from "@piplup/rhf-adapters/react-number-format";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { amount: "1234" }, }); return ( <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <Stack direction="column" spacing={2}> <NumberFormatBaseElement control={control} name="amount" format={(value) => value} /> <div> <MuiButtonElement control={control} type="submit" variant="contained"> Submit </MuiButtonElement> </div> </Stack> </form> );}Props
Prop
Type
NumberFormatBaseElement supports all standard props of the NumberFormatBase component, along with additional adapter-specific props.
The
refis forwarded to the underlying<NumberFormatBase />component.
Notes
- Use this component for low-level formatting scenarios when
NumericFormatElementorPatternFormatElementare too specialized. - For custom formatted inputs, build on
useNumberFormatBaseAdapter.