NotificationReceiverBindingButton

This component is a button shell that allows users to bind a notification receiver to their de[id].

The button shell alone contains no styling, and passes in relevant parameters into the child component. When using the button shell by itself, you can customize the styling of the notification receiver button using your own application's styling.

Usage

import { NotificationReceiverBindingButton, NotificationReceiverBindingButtonChildProps } from "@dustlabs/profiles/core";
import { NotificationReceiverType } from "@dustlabs/profiles/types"; 
 
function App() {
  return (
    <NotificationReceiverBindingButton
      receiverType={NotificationReceiverType.EMAIL}
    >
      {({ loading, profile, initiateVerification }: NotificationReceiverBindingButtonChildProps) => (
        {/** ... */} 
      )}
    </NotificationReceiverBindingButton>
  );
}

Props

receiverType

NotificationReceiverType

The notification receiver to bind to the de[id].

onSuccess (optional)

() => void

The onSuccess function that will be called when the user successfully binds a notification receiver to their de[id].

onVerificationCodeSent (optional)

() => void

The onVerificationCodeSent function that will be called when the user successfully sends a verification code to their notification receiver.

Returns

This component shell returns NotificationReceiverBindingButtonChildProps to the child component.

import { NotificationReceiverBindingButtonChildProps } from "@dustlabs/profiles/core";

loading

boolean

A boolean that represents whether loading state of the notification receiver binding.

profile

Profile

The profile of the user that is currently signed in.

initiateVerification

() => void

A function that will trigger the notification receiver binding flow.

EmailBindingButton

Out of the box, a email binding button is provided that lets you bind a user's email to their de[id]. This component is a styled version using the NotificationReceiverBindingButton component shell to bind the signed in de[id] to an email.

Usage

import { NotificationReceiverBindingButton } from "@dustlabs/profiles/core";
 
function App() {
  return <NotificationReceiverBindingButton />
}

disabled (optional)

boolean

A boolean that represents whether the button is disabled.

onSuccess (optional)

() => void

The same onSuccess prop as the NotificationReceiverBindingButton component shell.