Hooks

The hooks directory in the SSK-Core Kit contains reusable, custom React hooks that simplify complex logic and state management across your project. These hooks help improve code organization and reduce redundancy by encapsulating commonly-used logic into self-contained functions.

Hooks Overview

Below is a list of the key hooks available in this directory, along with a brief explanation of their purpose:

1. useCountdown

• Purpose: Provides a countdown timer for a specified number of days in the future. Returns the time left in days, hours, minutes, and seconds.

• Usage:

  const timeLeft = useCountdown(5) // Starts countdown for 5 days in the future

2. useFormReset

• Purpose: Resets a form after successful submission. Monitors the form state and clears the form fields based on user-defined conditions.

  • Usage:

    const formRef = useFormReset(formState)
    <form ref={formRef} ...>

3. useToastMessage

• Purpose: Displays toast notifications based on the form submission state (success or error). Provides user feedback through a notification system.

• Usage:

  const toastMessage = useToastMessage(formState)

4. useRecaptcha

• Purpose: Handles Google reCAPTCHA v3 token generation and validation. Automatically refreshes the reCAPTCHA token to maintain security during form submissions.

• Usage:

  const token = useRecaptcha(formState)

5. useActions

• Purpose: Provides easy access to actions that control state or trigger events. This hook simplifies how you interact with application logic, allowing for more modular and maintainable code.

• Usage:

  const { someAction } = useActions()
  someAction()

Adding New Hooks

To add a new hook to the hooks directory:

1. Create a new .ts or .tsx file in the hooks directory.

2. Define your custom hook with proper documentation.

3. Export the hook for use in your components.

Example structure for a custom hook:

// useCustomHook.ts
import { useState, useEffect } from 'react'

export default function useCustomHook() {
  const [state, setState] = useState(null)

  useEffect(() => {
    // Logic for the custom hook
  }, [])

  return state
}

Best Practices for Using Hooks

• Encapsulation: Hooks should encapsulate complex logic that is reused across the project, reducing the need to write the same logic multiple times.

• State Management: Use hooks to manage state efficiently within functional components.

• Code Clarity: By using hooks, the logic inside components becomes clearer and more manageable.

Conclusion

The hooks directory is an essential part of the SSK-Core Kit, helping to modularize your code and increase maintainability. These hooks abstract common logic and streamline how you build interactive and stateful React components.