Data loading hooks

Basejump provides some convenience hooks for loading data in client components. Under the hood, hooks use SWR, so the response will be the standard SWR hook response object.

useAccount

Returns a given account.

Required attributes

Name
accountId
Type
uuid
Description
Unique UUID for the account you're trying to lookup

useAccount

import { useAccount } from '@usebasejump/next';

export function MyComponent({accountId}) {
    const {data, error, isLoading} = useAccount(accountId);

    return (
        <h1>Hello {data?.name}</h1>
    )
};

data

{
    "account_id": "uuid",
    "account_role": "owner",
    "is_primary_owner": true,
    "name": "Your Team",
    "slug": "your-team",
    "personal_account": false,
    "billing_enabled": true,
    "billing_status": "active",
    "created_at": "timestamp",
    "updated_at": "timestamp",
    "metadata": {
        "your_field": "your_value"
    }
}

usePersonalAccount

Returns the current user's personal account.

usePersonalAccount

import { usePersonalAccount } from '@usebasejump/next';

export function MyComponent() {
    const {data, error, isLoading} = usePersonalAccount();

    return (
        <h1>Hello {data?.name}</h1>
    )
};

data

{
    "account_id": "uuid",
    "account_role": "owner",
    "is_primary_owner": true,
    "name": "Your Team",
    "slug": "your-team",
    "personal_account": true,
    "billing_enabled": true,
    "billing_status": "active",
    "created_at": "timestamp",
    "updated_at": "timestamp",
    "metadata": {
        "your_field": "your_value"
    }
}

useAccounts

Returns a list of accounts that the current user is a member of, including their personal account.

useAccounts

import { useAccounts } from '@usebasejump/next';

export function MyComponent() {
    const {data, error, isLoading} = useAccounts();

    return (
        <h1>Currently have {data?.length} accounts</h1>
    )
};

data

[
    {
        "account_id": "uuid",
        "account_role": "member",
        "is_primary_owner": true,
        "name": "Team name",
        "slug": "team-slug",
        "personal_account": true,
        "created_at": "timestamp",
        "updated_at": "timestamp",
    },
    ...
]

useAccountMembers

Returns a list of members for a given account ID

Required attributes

Name
accountId
Type
uuid
Description
Unique UUID for the account you're trying to lookup

useAccountMembers

import { useAccountMembers } from '@usebasejump/next';

export function MyComponent({accountId}) {
    const {data, error, isLoading} = useAccountMembers(accountId);

    return (
        <h1>Currently have {data?.length} members</h1>
    )
};

data

[
    {
        "user_id": "uuid",
        "account_role": "member",
        "is_primary_owner": true,
        "name": "Frank Smith",
        "email": "test@test.com"
    },
    ...
]

useAccountInvitations

Returns a list of current invitations for a given account ID

Required attributes

Name
accountId
Type
uuid
Description
Unique UUID for the account you're trying to lookup

useAccountInvitations

import { useAccountInvitations } from '@usebasejump/next';

export function MyComponent({accountId}) {
    const {data, error, isLoading} = useAccountInvitations(accountId);

    return (
        <h1>Currently have {data?.length} invitations</h1>
    );
};

data

[
    {
        "account_role": "member",
        "created_at": "timestamp",
        "invitation_type": "24_hour",
        "invitation_id": "uuid"
    },
    ...
]

useAccountBillingStatus

Returns the current billing status for a given account ID. This hits the actual provider so you'll get up to date information.

Required attributes

Name
accountId
Type
uuid
Description
Unique UUID for the account you're trying to lookup

useAccountBillingStatus

import { useAccountBillingStatus } from '@usebasejump/next';

export function MyComponent({accountId}) {
    const {data, error, isLoading} = useAccountBillingStatus(accountId);

    return (
        <h1>Current status is {data?.status}</h1>
    );
};

data

{
    "subscription_id": "vendor_subscription_id",
    "subscription_active": true,
    "status": "active",
    "billing_email": "your@email.com",
    "account_role": "owner",
    "is_primary_owner": true,
    "billing_enabled": true,
}

useAccountInvitationLookup

Returns the current billing status for a given account ID. This hits the actual provider so you'll get up to date information.

Required attributes

Name
token
Type
string
Description
Unique invitation token you want to lookup

useAccountInvitationLookup

import { useAccountInvitationLookup } from '@usebasejump/next';

export function MyComponent({token}) {
    const {data, error, isLoading} = useAccountInvitationLookup(token);

    return (
        <h1>You've been invited to join {data?.name}</h1>
    );
};

data

{
    "name": "Your Team",
    "active": true
}

useBillingPlans

Returns the current billing status for a given account ID. This hits the actual provider so you'll get up to date information.

Optional attributes

Name
accountId
Type
string
Description
Unique account ID you want to lookup plans for. If sent, the response will indicate which plan is currently selected.

useBillingPlans

import { useBillingPlans } from '@usebasejump/next';

export function MyComponent({accountId}) {
    const {data, error, isLoading} = useBillingPlans(accountId);

    return (
        <h1>Select from {data?.length} plans</h1>
    );
};

data

[
    {
        "id": "vendor_plan_id",
        "name": "Plan name",
        "description": "Your plan description",
        "amount": 1000,
        "currency": "usd",
        "interval": "month" | "year" | "one_time",
        "interval_count": 1,
        "trial_period_days": 30,
        "active": false
    },
    ...
]