User UI Components

<UserAccountDropdown/>

Description

The <UserAccountDropdown/> component can be used to show the user's avatar and their account dropdown. It works with or without ROQ Authentication.

Integration with ROQ Authentication

To show the <UserAccountDropdown/> component, add this snippet to your page:

import {UserAccountDropdown} from "@roq/ui-react";
 
function App() {
    return <UserAccountDropdown/>;
}

Integration without ROQ Authentication

import {UserAccountDropdown} from "@roq/ui-react";
 
function App() {
    const handleSignOut = () => {
        //your sign-out logic
    };
 
    return <UserAccountDropdown onSignOut={handleSignOut}/>;
}

<UserProfile/>

Description

The <UserProfile/> component can be used to show the user's profile information, along with the ability to edit the profile. It includes an avatar uploader, and a form to edit the user's password, and other profile information.

Integration

To show the UserProfile, you can add this snippet to your page:

import { UserProfile } from "@roq/ui-react";
 
function App() {
  return <UserProfile />;
}