> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# DynamicUserProfile

> [card] Recommended: JavaScript SDK with React Hooks
>
> For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

### Summary

The DynamicUserProfile component is responsible for displaying the dialog or dropdown of the user's profile information, connected wallets, and more.

*Note: it should be placed as high as possible in the component tree to guarantee that the component is always rendered.*

### Settings

| Prop | Description |
| - | - |
| variant?: 'modal' \| 'dropdown'; | Specifies whether to show DynamicUserProfile as a centered modal or a dropdown. The component in the dropdown type renders relative to the parent. Defaults to modal. |

### Usage

#### Control opening and closing

You can simply call `setShowDynamicUserProfile(boolean)` to show or close the DynamicUserProfile.

```TypeScript theme={"system"}
import React from "react";
import {
  DynamicUserProfile,
  useDynamicContext
} from "@dynamic-labs/sdk-react-core";

export const Example = () => {
  const { setShowDynamicUserProfile } = useDynamicContext();
  return (
    <>
      <button onClick={() => setShowDynamicUserProfile(true)}>
        Click to open DynamicUserProfile!
      </button>
      <DynamicUserProfile />
    </>
  );
};
```

#### Callback at closing or opening

You can use the `showDynamicUserProfile` property to trigger the logic after opening/closing the widget.

```java theme={"system"}
import React from "react";

import {
  DynamicWidgetUserProfile,
  useDynamicContext
} from "@dynamic-labs/sdk-react-core";

export const Example = () => {
    const { showDynamicUserProfile } = useDynamicContext();
  React.useEffect(() => {
        if (showDynamicUserProfile) {
        /* On widget opens */
    }   else {
      /* On widget closes */
    }
  },
  [showDynamicUserProfile])
  return null;
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.