User UI Components

<UserAccountDropdown/>

Description

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

Integration with ROQ Authentication

To show the UserAccountDropdown, 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 />;
}