# useConnect

## Description

This hook allows you to initiate a connection to a smart account with optional parameters and can handle the process both synchronously and asynchronously.

## Parameters

The `useConnect` hook itself does not take parameters. However, the primary functions returned by the hook, `connect` and `connectAsync`, accept the following optional parameters:

```typescript
type ConnectParameters = {
    address?: Address;
    passKeyName?: string;
};
```

## Returns

* **connect** (`(params?: ConnectParameters) => void`): Initiates the connection process. It accepts an optional `params` object to specify connection details. It handles state changes for pending status and errors internally.
* **connectAsync** (`(params?: ConnectParameters) => Promise<void>`): An asynchronous function similar to `connect`, but returns a promise, allowing for usage with `async/await` syntax.
* **isPending** (`boolean`): A boolean value indicating whether the connection process is currently pending (`true`) or not (`false`).
* **error** (`Error | null`): An error object if an error occurred during the connection process, otherwise `null`.

## Example

```tsx
import React, { useState } from 'react';
import { useConnect } from "@cometh/connect-react-hooks";

const ConnectAccount = () => {
  const { connect, isPending, error } = useConnect();
  const [address, setAddress] = useState('');

  const handleConnect = () => {
    connect({ address });
  };

  return (
    <div>
      <h1>Connect to Smart Account</h1>
      <input
        type="text"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
        placeholder="Enter smart account address"
      />
      <button onClick={handleConnect} disabled={isPending}>
        {isPending ? 'Connecting...' : 'Connect'}
      </button>
      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
    </div>
  );
};

export default ConnectAccount;

```