DynamicUserProfile

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) 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.

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.

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;
}