Skip to main content

​
Overview

useUserDetails hook is used to fetch and manage the user details. It leverages the react-query library to handle the asynchronous operation and provides error handling and success callbacks.

​
Example Usage

user-details-component.tsx
import { useUserDetails } from '@locai1/iam-react';

const UserDetailsComponent = () => {
  const handleSuccess = (userDetails) => {
    // Handle successful fetch
  };

  const handleError = (error) => {
    // Handle fetch error
  };

  const { data: userDetails, isLoading, error } = useUserDetails({
    onError: handleError,
    onSuccess: handleSuccess,
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h2>User Details</h2>
      <p>Name: {userDetails?.name}</p>
      <p>Email: {userDetails?.email}</p>
    </div>
  );
};

​
Parameters

​
onSuccess
(userDetails: UserDetails | undefined) => void
required
callback function that is called when the fetching process is successful. It receives the UserDetails object as an argument.
UserDetails type
type UserDetails = {
  firstName: string;
  lastName: string;
  phoneNumber: string;
  email: string;
  isEmailVerified: boolean;
  isPhoneVerified: boolean;
  userState: string;
  displayName: string;
  metadata?: Record<string, string>;
};
​
onError
HttpErrorCallback
required
callback function that is called when an error occurs during the sign-up process.
HttpErrorCallback type
type HttpErrorCallback = (error: HttpError | Error | undefined) => void;

​
Returns

​
data
userDetails
user details object if the fetching process is successful.
​
isLoading
boolean
boolean indicating whether the fetching process is currently in progress.
​
isError
boolean
boolean indicating whether an error occurred during the fetching process.
​
error
HttpError | Error
error object if an error occurred during the fetching process.