Component Base Role

Component Base Role - Usage.tsx

const App = () => {
  return (
      <>
       <RoleFlag user={user} roles={[ROLES.USER]}>
         <AppUser />
        </RoleFlag>
      <RoleFlag user={user} roles={[ROLES.ADMIN]}>
         <AppAdmin />
        </RoleFlag>
    </>
  )
}

RoleFlag.tsx

const RoleFlag = ({ user, roles, fallbackComponent }: Props) => {
  if (hasRole(user, roles)) {
    return children;
  }
  return fallbackComponent ? fallbackComponent : null;
};