User Invites
UI Components

User Invites UI Components

ℹ️

Before you can use these UI Components, RoqProvider needs to be installed.

<UserInviteButton />

Description

The <UserInviteButton /> component renders a button which opens a lightbox. The user can then invite other users.

user-invite-button

Integration

You can integrate the <UserInviteButton/> component using this code:

import { UserInviteButton } from '@roq/ui-react';
 
function App() {
    return (
        <UserInviteButton
            onInviteError={function noRefCheck(){}}
            onInviteSuccess={function noRefCheck(){}}
        />
    );
}
PropTypeDescription
onInviteErrorfunction(error)Error callback when sending the invite fails.
onInviteSuccessfunction(data)Success callback when sending the invite success.

User Invite Pane UI Component

<UserInvitePane />

Description

The <UserInvitePane /> component renders a pane that allows to invite one or multiple users at once. This component support locales.

Image

Integration

You can integrate the <UserInvitePane/> component using this code:

import { UserInvitePane } from '@roq/ui-react';
 
function App() {
    return (
        <UserInvitePane locale={'de-DE'}
            onInviteError={function noRefCheck(){}}
            onInviteSuccess={function noRefCheck(){}}
        />
    );
}

The email sent to the invitee is based on the locale property of the <UserInvitePane/> component. Make sure the email template for the local is exist in the ROQ Console.

<UserInvitesTable />

Description

The <UserInvitesTable /> component renders all related components at once. Users can invite other users and manage their invitees in a table. This component support locales property.

user invites table screenshot

Integration

You can integrate the <UserInvitesTable/> component using this code:

import { UserInvitesTable } from '@roq/ui-react';
 
function App() {
    return (
        <UserInvitesTable locale={'en-US'}/>
    );
}