Formik का परिचय
In this page:
<Formik
initialValues={{ field: "" }}
validationSchema={schema}
onSubmit={values => {
// handle values
}}
>
<Form>
<Field name="field" />
<ErrorMessage name="field" />
</Form>
</Formik>Formik क्या Provide करता है
Formik एक popular form library है जो values, validation errors, touched fields, और submission state आपके लिए manage करती है, react-hook-form जैसी spirit में similar लेकिन एक <Formik> component उपयोग करने वाली थोड़ी अलग, ज़्यादा declarative API के around बनी।
उदाहरण: What Formik Provides
// Run in your local React project (npm install required)
import { Formik, Form, Field } from 'formik';
function App() {
return (
<Formik initialValues={{ email: '' }} onSubmit={values => console.log(values)}>
<Form>
<Field name="email" placeholder="Email" />
<button type="submit">Submit</button>
</Form>
</Formik>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Yup के साथ Validation जोड़ना
Formik naturally Yup के साथ pair होता है, एक schema-validation library, validationSchema prop के through। अपने खुद के if-statements लिखने के बजाय, आप describe करते हैं कि आपके data को किस shape और rules से match करना चाहिए, और Formik automatically change और submit पर वह validation run करता है।
उदाहरण: Adding Validation with Yup
// Run in your local React project (npm install required)
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as yup from 'yup';
const schema = yup.object({ email: yup.string().email().required() });
function App() {
return (
<Formik initialValues={{ email: '' }} validationSchema={schema} onSubmit={v => console.log(v)}>
<Form>
<Field name="email" />
<ErrorMessage name="email" component="p" />
</Form>
</Formik>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
useFormik Hook सीधे उपयोग करना
<Formik> component और JSX children pattern के बजाय, Formik एक useFormik hook भी offer करता है जो values, handleChange, handleSubmit, और errors directly return करता है — react-hook-form या plain useState-based forms लिखने के style के closer।
उदाहरण: Using the useFormik Hook Directly
// Run in your local React project (npm install required)
import { useFormik } from 'formik';
function App() {
const formik = useFormik({
initialValues: { email: '' },
onSubmit: values => console.log(values),
});
return (
<form onSubmit={formik.handleSubmit}>
<input name="email" value={formik.values.email} onChange={formik.handleChange} />
<button type="submit">Submit</button>
</form>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Fields को Formik के <Field> component या render-prop API से wrap न करना, automatic value/onChange wiring खोते हुए।
- validationSchema भूल जाना, इसलिए कोई validation run नहीं होती भले ही JSX में errors reference किए गए हों।
- Manual useState को Formik की खुद की values के साथ mix करना, same field के लिए दो sources of truth cause करते हुए।
- Formik एक npm form library है जो values, errors, और handlers एक single <Formik> component या useFormik hook के through provide करती है।
- यह आमतौर पर declarative validationSchema definitions के लिए Yup के साथ pair होती है।
- <Field> component एक input के लिए name, value, और onChange auto-wire करता है।
- onSubmit final validated values object receive करता है जब form successfully submit हो जाता है।
npm install formik (और typically yup) चाहिए — इस sandbox में CDN से available नहीं; React 16.8+ के साथ काम करता है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: