⚛ RenderIfRole

👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page

This component is used to conditionally show content based on a user’s role.

import { ReactNode } from 'react'
import { useUserContext } from '../../providers'

export enum Roles {
none = 'none',
admin = 'admin',
superadmin = 'superadmin',
user = 'user',
readonly = 'readonly',

export interface RenderIfRoleProps {
roles: Roles[]
children: ReactNode

export const RenderIfRole = ({
}: RenderIfRoleProps): ReactNode | null => {
const { role } = useUserContext() // get user's current role, could also be passed as a prop
const providedRolesMatchUserRole = role && roles.includes(Roles[role])

if (providedRolesMatchUserRole) {
return children
return null

Usage Jump to heading

This link will only be shown if the current user’s role matches Roles.admin

<RenderIfRole roles={[Roles.admin]}>
<Link to={INVITE_PAGE_PATH}>Invite</Link>

Multiple roles can be passed in to the roles prop, like so:

<RenderIfRole roles={[Roles.client, Roles.trainee]}>Some content</RenderIfRole>

← Back home