This guide describes API’s you can use in your views. For actual HTML/CSS helper classes and components, you can check out View building blocks (inline components and classes)

Hooks

Full API: frontend/shared/components/src/hooks

Hooks are helpful small functions that you define in your setup hook of your component (never use it anywhere else). They are always prefixed with ‘use’.

The most commonly used hooks are:

useOrganization / useRequiredOrganization

Returns the current organization in scope. In Stamhoofd you can switch between multiple organizations. Some parts of the app have a scoped organization: e.g. the admin panel of a specific organization. Other parts don’t (always) have a scoped organization, such as the platform portal or the member portal when in platform mode (= Stamhoofd runs with shared members across all organizations).

The useOrganization hook, returns a Ref to the current organization, or null if there isn’t one in scope.

const organization = useOrganization();

function clickButton() {
		alert(organization?.value.name);
}

useContext

Returns the current SessionContext — this contains data such as the currently logged in user. You’ll normally only use it for authentication checking of making requests in the frontend:

Sending (authenticated) requests in the frontend

Permission checking in the frontend (authorization)

useUser

Returns a ref to the currently logged in user (if any).