DynamicEmbeddedWidget

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

This component will render the signup/login UI as well as the user profile all in one on the page. It’s useful as an alternative to DynamicWidget, which first renders a button that brings up the flow.

You can see this component in action on our demo: https://demo.dynamic.xyz/

Parameter	Type	Description
background?	'default' | 'none' | 'with-border'	Specifies what kind of background to apply, defaults to ‘default’. See the background options section for the differences.
className?	string	Allows setting a className to the container component. Note: this does not work when Shadow Dom is enabled!
style?	CSSProperties	Allows passing explicit style to the container, such as setting a fixed height.

Background options

The background prop controls the container around the widget. Try it live on our demo.

default

A filled card with a drop shadow.

none

No container, so the widget inherits the background of the page.

with-border

A filled card with a border instead of a shadow.

Usage

import {
  DynamicEmbeddedWidget,
  DynamicContextProvider,
  useDynamicContext,
} from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";

import "./App.css";

function App() {
  const { sdkHasLoaded } = useDynamicContext();

  return (
    <div className="App">
      <DynamicContextProvider
        settings={{
          environmentId: "XXXX",
          walletConnectors: [EthereumWalletConnectors],
        }}
      >
        <div className="widget-container">
        {sdkHasLoaded ? (
            // background can be 'none', 'default' or 'with-border'
            <DynamicEmbeddedWidget background="default" />
          ) : (
            <LoadingSpinner />
          )}
        </div>
      </DynamicContextProvider>
    </div>
  );
}

export default App;