https://github.com/raffian-moin/react-hook-form-lecture

Code demonstration for the introduction of React hook form session at TechnoVista Limited
https://github.com/raffian-moin/react-hook-form-lecture

nextui react-hook-form react-router reactjs

Last synced: about 1 month ago
JSON representation

Code demonstration for the introduction of React hook form session at TechnoVista Limited

• Host: GitHub
• URL: https://github.com/raffian-moin/react-hook-form-lecture
• Owner: Raffian-moin
• Created: 2024-10-23T17:17:32.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-10-27T08:52:19.000Z (about 2 months ago)
• Last Synced: 2024-10-27T09:50:46.763Z (about 2 months ago)
• Topics: nextui, react-hook-form, react-router, reactjs
• Language: TypeScript
• Homepage:
• Size: 72.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# What We Covered at the Session

1. Common Form Handling Tasks

   - Validate Form Data

   - Display Error Messages

   - Clear Input Fields

   - Conditional Input Field Display

   - Prefill Data on Edit

2. Controlled vs Uncontrolled Components

   - Value, onChange, and DefaultValue

3. React-Hook-Form and Uncontrolled Input Components

   - How React-Hook-Form Registers Input Fields

   - Form Submission with React-Hook-Form

   - Form Validation Rules

   - Displaying Error Messages

   - Resetting Input Fields

   - Using watch() for UI Changes

   - Prefill Data in Edit Mode

4. React-Hook-Form and Controlled Components with UI Libraries

5. Code Organization

   - Avoiding Duplicate Code: Creating Input Field Components

   - Handling Too Many Props: Using useFormContext

6. Performance

   - Using useWatch to avoid re-rendering of whole tree

## Installation

- **Requirements**:

  - **Node.js**: >= 16.0

1. **Clone the repository:**

   ```bash

   git clone https://github.com/Raffian-moin/React-hook-form-lecture.git

2. **Navigate to the project directory:**

    ```bash

    cd React-hook-form-lecture

4. **Install dependencies:**

    ```bash

    npm install

5. **Run project:**

    ```bash

    npm run dev