Using your own modal component

In some rare cases you might want to highly customize modal window. The easiest way is to use your own component.

NotificationButton component can accept a react component reference renderModalComponent with the following arguments:

• open - boolean value indicating if dialect modal is open

• setOpen - react callback to control dialect modal open state

• children - children components that your modal component should render. You must render children.

• ref - react ref callback to your component under the hood. You must pass reference.

'use client';

import '@dialectlabs/react-ui/index.css';

import { DialectSolanaSdk } from '@dialectlabs/react-sdk-blockchain-solana';
import {
  Icons,
  NotificationTypeStyles,
  NotificationsButton,
} from '@dialectlabs/react-ui';

const DAPP_ADDRESS = '...';

export const DialectSolanaNotificationsButton = () => {
  return (
    <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
      <NotificationsButton
        renderModalComponent={({ open, setOpen, ref, children }) => {
          if (!open) {
            return null;
          }
          return (
            <div ref={ref} className="fixed inset-0 z-10">
              {children}
            </div>
          );
        }}
      />
    </DialectSolanaSdk>
  );
};