Hooks

16min
We provide a few hooks to access the same data we show on our components.

Hooks are used to retrieve data. It's the same data displayed on the widgets. They will return the same data the api﻿ returns, with the plus that the data is cached for you, making the app run faster. You can use them in case you need to render your own component or to subscribe to know the status of a loading, or the status of the data in the widgets you are rendering. In the widgets section, you can read which hooks are consumed by every component.
All hooks can be imported from:
JS
import { ... } from '@amberflo/uikit`
import { ... } from '@amberflo/uikit`
﻿
And they can be used as:
JS
const { data, isFetching, isError, error, isSuccess, isIdle } = useHookName(<some parameters>)
const { data, isFetching, isError, error, isSuccess, isIdle } = useHookName(<some parameters>)
﻿
Notice
Hooks are supported by React 16.8+. You won't be able to consume these hooks if you are using an older version.
Hooks are only supported by functional components. If you are using class components, you'll need to move it to functional or write a High Order Component.
Common attributes
Every hook will return an object containing always the same keys:
data: This is the result of the hook, and the content will vary depending on the hook called. See the list below for more details.
isFetching: This is a boolean attribute, indicating if the hook is retrieving or not data. With this, you can subscribe and show a custom loader.
isError: This is a boolean attribute, indicating if the hook throws an error retrieving the data. So you can act accordingly.
error: If there is an error, this attribute will have the error message.
isSuccess: This is a boolean attribute, indicating the fetch has ended, and the data was retrieved.
isIdle: This is a boolean attribute, indicating the fetch has ended. No matter whether it succeeds or fails, means the hook is idle right now.

Available hooks are
useCost
Parameters
﻿
This hook will internally call the cost api call﻿ . And returns it's data.
Structure of the hook:
JS
const useCost = (
  startDate: number,
  endDate: number,
  period: string
) => {
  data: CostResponse
  /* This hook will have all common attributes also */
}
const useCost = (
  startDate: number,
  endDate: number,
  period: string
) => {
  data: CostResponse
  /* This hook will have all common attributes also */
}
﻿
You can see all common attributes here﻿.
useCreditsLedger
No parameters are required
This hook will internally call the customer credits ledger api call and return its data.
Structure of the hook
JS
const {
    data: creditsLedger,
    /* This hook will have all common attributes also */
  }
const {
    data: creditsLedger,
    /* This hook will have all common attributes also */
  }
﻿
You can see all common attributes here.
useCurrentPricingPlan
No parameters are required
This hook will internally call the current pricing plan details api call﻿ and return its data.
Structure of the hook:
JS
const useCurrentPricingPlan = () => {
  data: PricingPlanResponse,
  handleSelectPlan: (pricingPlanId: string) => void
  /* This hook will have all common attributes also */
}
const useCurrentPricingPlan = () => {
  data: PricingPlanResponse,
  handleSelectPlan: (pricingPlanId: string) => void
  /* This hook will have all common attributes also */
}
﻿
usePricingPlanDetails
No parameters are required
This hook will internally call the current pricing plan details api call﻿ and the set new pricing plan api call﻿ and return its data.
Structure of the hook:
JS
const usePricingPlanDetails = () => {
  data: PricingPlanResponse,
  handleSelectPlan: (pricingPlanId: string) => void
  /* This hook will have all common attributes also */
}
const usePricingPlanDetails = () => {
  data: PricingPlanResponse,
  handleSelectPlan: (pricingPlanId: string) => void
  /* This hook will have all common attributes also */
}
﻿
handleSelectPlanwill receive a new pricing plan, and set it to the customer.
You can see all common attributes here﻿.
useInvoiceDetails
Parameters
﻿
This hook will internally call the get customer portal invoice api call﻿ and return its data.
Structure of the hook:
JS
const useInvoiceDetails = (
  invoiceDate?: string,
  planId?: string,
  enabled?: boolean = true
) => {
  data: InvoiceType
  /* This hook will have all common attributes also */
}
const useInvoiceDetails = (
  invoiceDate?: string,
  planId?: string,
  enabled?: boolean = true
) => {
  data: InvoiceType
  /* This hook will have all common attributes also */
}
﻿
You can see all common attributes here﻿.
useLatestInvoice
No parameters are required
This hook will internally call the get customer portal invoice api call ﻿ and return its data.
Structure of the hook:
JS
const useLatestInvoice = () => {
  data: InvoiceType
  /* This hook will have all common attributes also */
}
const useLatestInvoice = () => {
  data: InvoiceType
  /* This hook will have all common attributes also */
}
﻿
You can see all common attributes here﻿﻿
useInvoices
No parameters are required
This hook will internally call the get all customer invoice api call﻿ and return its data.
Structure of the hook:
JS
const useInvoices = () => {
  data: InvoiceType[]
  /* This hook will have all common attributes also */
}
const useInvoices = () => {
  data: InvoiceType[]
  /* This hook will have all common attributes also */
}
﻿
You can see all common attributes here﻿.
useMeters
No parameters are required
This hook will internally call the get all meters api call﻿ and return its data.
Structure of the hook:
JS
cosnt useMeters = () => {
  data: Meter[]
  /* This hook will have all common attributes also */
}
cosnt useMeters = () => {
  data: Meter[]
  /* This hook will have all common attributes also */
}
﻿
You can see all common attributes here﻿.
usePrepaidSummary
No parameters are required
This hook will internally call the customer prepaid wallet api call﻿ and return its data.
Structure of the hook
JS
const usePrepaidSummary = () => {
  data: PrepaidItem[]
  /* This hook will have all common attributes also */
}
const usePrepaidSummary = () => {
  data: PrepaidItem[]
  /* This hook will have all common attributes also */
}
﻿
You can see all common attibutes here﻿.
useProductItems
No parameters are required
This hook will internally call the /product-itemsapi call. Returning a list of product items, including its: id, description, lastUpdateTimeInMillis, lockingStatus, productId, meterApiName, productItemName.
Structure of the hook:
JS
const useProductItems = () => {
  data: ProductItemDefinition[]
  /* This hook will have all common attributes also */
}
const useProductItems = () => {
  data: ProductItemDefinition[]
  /* This hook will have all common attributes also */
}
﻿
You can see all common attributes here﻿.
useStripeClientSecret
No parameters are required
This hook will internally call the  customer setup intent api call﻿ and return its data.
Structure of the hook:
JS
const useStripeClientSecret = () => {
  data: string
  /* This hook will have all common attributes also */
}
const useStripeClientSecret = () => {
  data: string
  /* This hook will have all common attributes also */
}
﻿
You can see all common attributes here﻿.
useUsage
Parameters
﻿
Structure of the hook:
JS
const useUsage = (
  meters: Array<{ meterApiName: string; filter?: Record<string, string[]> }>,
  startDate: number,
  endDate: number,
  period: string,
  groupBy?: string
) => {
  data: UsageResponse[]
  /* This hook will have all common attributes also */
}
const useUsage = (
  meters: Array<{ meterApiName: string; filter?: Record<string, string[]> }>,
  startDate: number,
  endDate: number,
  period: string,
  groupBy?: string
) => {
  data: UsageResponse[]
  /* This hook will have all common attributes also */
}
﻿
You can see all common attribues here﻿.
Updated 30 Oct 2024
Did this page help you?
Embeddable UI Kit - React.js
React.js Widgets