↼ All Hooks

useStep

useStep hooki, multi-qadamli shakllar, sehrgarlar yoki darslar kabi qadamli jarayonlarni boshqarish uchun mo'ljallangan maxsus React hookidir.


useStep Hook

Umumiy Ma'lumot

useStep hooki, multi-qadamli shakllar, sehrgarlar yoki darslar kabi qadamli jarayonlarni boshqarish uchun mo'ljallangan maxsus React hookidir. Bu qadamlar bo'yicha oson navigatsiyani ta'minlaydi, hozirgi qadamni nazorat qilish va ularni osonlik bilan o'zgartirish imkonini beradi.

O'rnatish

npm install @udemere/usehooks

Foydalanish

useStep hookidan foydalanish uchun uni komponentingizga import qiling va jarayon qadamlarini boshqarish uchun chaqiring.

import React from 'react'
import { useStep } from '@udemere/usehooks'
 
const StepComponent: React.FC = () => {
	const { currentStep, nextStep, prevStep, reset } = useStep({ totalSteps: 3 })
 
	return (
		<div>
			<h2>Hozirgi Qadam: {currentStep + 1}</h2>
			<div>
				<button onClick={prevStep} disabled={currentStep === 0}>
					O'tgan
				</button>
				<button onClick={nextStep} disabled={currentStep === 2}>
					Keyingi
				</button>
			</div>
			<button onClick={reset}>Qayta Tiklash</button>
		</div>
	)
}
 
export default StepComponent

API

Misol

useStep hookidan multi-qadamli shakl komponentida qanday foydalanishni ko'rsatadigan misol:

import React from 'react'
import { useStep } from '@udemere/usehooks'
 
const MultiStepForm: React.FC = () => {
	const { currentStep, nextStep, prevStep, reset } = useStep({ totalSteps: 3 })
 
	return (
		<div>
			{currentStep === 0 && <div>Qadam 1: Foydalanuvchi Ma'lumotlari</div>}
			{currentStep === 1 && <div>Qadam 2: Manzil Ma'lumotlari</div>}
			{currentStep === 2 && <div>Qadam 3: Tasdiqlash</div>}
 
			<div>
				<button onClick={prevStep} disabled={currentStep === 0}>
					O'tgan
				</button>
				<button onClick={nextStep} disabled={currentStep === 2}>
					Keyingi
				</button>
			</div>
			<button onClick={reset}>Qayta Tiklash</button>
		</div>
	)
}
 
export default MultiStepForm

Eslatmalar