Hooks

we provide several hooks to access the same data used in our components hooks are used to retrieve data directly from the api , and they return the same data shown in the widgets the key benefit is that the data is automatically cached, helping your app run more efficiently you can use these hooks if you want to build and render your own components using amberflo data track the loading status or data availability of a component subscribe to updates used in the widgets each widget’s documentation specifies which hooks it uses all hooks can be imported from import { } from '@amberflo/uikit` and they can be used as const { data, isfetching, iserror, error, issuccess, isidle } = usehookname(\<some parameters>) notice amberflo hooks are supported in react 16 8 and above if you're using an older version of react, hooks will not be available additionally, hooks can only be used within functional components if you're working with class components, you’ll need to either refactor them into functional components or use a higher order component (hoc) as a workaround common attributes every amberflo hook returns an object containing the following keys data the response returned by the hook the structure and contents of this value depend on the specific hook being used isfetching a boolean indicating whether the hook is currently fetching data useful for displaying loading indicators iserror a boolean that becomes true if an error occurred while fetching data error contains the error object or message if the hook encountered an issue during data retrieval issuccess a boolean indicating that the data fetch has completed successfully isidle a boolean indicating that the hook is not currently fetching data and is in an idle state—whether due to completion or failure of the fetch available hooks are usecost parameters this hook will internally call the cost api call and returns it's data structure of the hook const usecost = ( startdate number, enddate number, period string ) => { data costresponse / this hook will have all common attributes also / } you can see all hooks usecreditsledger no parameters are required this hook will internally call the customer credits ledger api call and return its data structure of the hook const { data creditsledger, / this hook will have all common attributes also / } you can see all common attributes here https //docs amberflo io/docs/hooks#common attributes 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 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 const usepricingplandetails = () => { data pricingplanresponse, handleselectplan (pricingplanid string) => void / this hook will have all common attributes also / } handleselectplan will receive a new pricing plan, and set it to the customer you can see all hooks useinvoicedetails parameters this hook will internally call the get customer portal api call and return its data structure of the hook const useinvoicedetails = ( invoicedate? string, planid? string, enabled? boolean = true ) => { data invoicetype / this hook will have all common attributes also / } you can see all embeddable ui kit react js uselatestinvoice no parameters are required this hook will internally call the get customer api and return its data structure of the hook const uselatestinvoice = () => { data invoicetype / this hook will have all common attributes also / } you can see all hooks /#common attributes useinvoices no parameters are required this hook will internally call the get all cutomer invoices api call and return its data structure of the hook const useinvoices = () => { data invoicetype\[] / this hook will have all common attributes also / } you can see all hooks /#common attributes usemeters no parameters are required this hook will internally call the get all meters api call and return its data structure of the hook cosnt usemeters = () => { data meter\[] / this hook will have all common attributes also / } you can see all hooks /#common attributes useprepaidsummary no parameters are required this hook will internally call the customer prepaid wallet api call and return its data structure of the hook const useprepaidsummary = () => { data prepaiditem\[] / this hook will have all common attributes also / } you can see all hooks /#common attributes useproductitems no parameters are required this hook will internally call the /product items api call returning a list of product items, including its id , description , lastupdatetimeinmillis , lockingstatus , productid , meterapiname , productitemname structure of the hook const useproductitems = () => { data productitemdefinition\[] / this hook will have all common attributes also / } you can see all hooks /#common attributes usestripeclientsecret no parameters are required this hook will internally call the customer setup intent api call and return its data structure of the hook const usestripeclientsecret = () => { data string / this hook will have all common attributes also / } you can see all hooks /#common attributes useusage parameters structure of the hook 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 hooks /#common attributes