Embeddable UI Kit - React.js

embeddable ui components for react js applications the amberflo ui kit is a react component library that allows amberflo accounts to embed key usage and billing views directly within their own applications—for individual customers if you are not using a react js environment, you can alternatively use the ui sdk vanilla javascript integration to integrate amberflo widgets installation run yarn add @amberflo/uikit or npm install @amberflo/uikit to install amberflo ui kit in your react project 📘 technologies react >= v17 0 2 node v16 13 1 typescript v4 5 5 available versions all versions can be found on npm repository @amberflo/uikit https //www npmjs com/package/@amberflo/uikit getting started amberflo provider the amberfloprovider is a required wrapper component that enables amberflo components to function correctly by connecting them to the amberflo api it must wrap your application and takes in two key inputs a customer specific session token and a theme configuration you can check here how to get session token embeddable ui kit react js ", fontsize , fontfamily "" }} \> imports to import a single amberflo ui kit component into your application (recommended) import { costexplorerbargraph, invoiceslist } from "@amberflo/uikit theming in order to customize components with a theme add a theme prop to the amberfloprovider with the following object { brandcolor string // it can be hex, or color name fontsize number // basic font size, all rest of font sizes will scale dynamically to this value fontfamily string // name of the font to use the font must be available on your site or you can use a custom font as showed below customfonturl string // google font url to import to your site } we’ve added custom class names to most of our components once the components are rendered in your app, you can identify them by class names that begin with aflo these class names can be used alongside material ui classes in your own css file to apply custom styling so for instance, if you want to set a dark mode , to make it look something like this you can add some styles like aflo button aflo text { color black; } aflo text { color white; } this way you can change the text color for the whole components to white and in the buttons that have a light background, we can set a dark color as black types amberflo ui kit is fully typed if you're using typescript in your project, this makes it easy to view the expected properties for each component and understand the return types of functions and hooks invoice related options several ui kit components display invoice related data, such as invoice list , invoice details , and invoice pdf these components are influenced by settings configured under amberflo | settings | invoice , which also apply to the customer portal and main amberflo application current invoice display options include displaying cached invoices invoice data can be shown using either cached or real time values cached data helps improve load times group product items on invoices product items can be grouped into categories, allowing for a clearer breakdown of consumption and billing how to read how to use the react js widgets read how to use hooks appendix 1 full code example import { useeffect, usestate } from "react"; import { amberfloprovider, usagebymeterlinegraph, usagebymetertable, } from "@amberflo/uikit"; function app() { const \[sessiontoken, setsessiontoken] = usestate(null); const getsession = async () => { const response = await fetch("https //app amberflo io/session", { method "post", body json stringify({ // replace customer123 with an actual customer id customerid "customer123", }), headers { // you should not have your api key in your client side code // this is only for demonstration purposes to try out a quick working example // replace your api key with your account's api key // please see this section for more info // (https //docs amberflo io/docs/get session token) "x api key" "your api key", }, }); const data = await response json(); setsessiontoken(data sessiontoken); }; useeffect(() => { getsession(); }, \[]); if (!sessiontoken) { // you can handle this many different ways (e g loaders, etc ), but we will just // return null until you have a token for simplicity return null; } return ( // when using ui kit components, they must be a child of the amberfloprovider // find out more about the amberfloprovider here https //docs amberflo io/docs/amberflo components#getting started // you will give need to provide it the sessiontoken we receive from the // https //app amberflo io/session api \<amberfloprovider session={sessiontoken}> {/ a usage graph and usage table will be displayed populated with the usage of the customer you selected a session for above your account must have meters and the selected customer must have usage to be able to display any data within the table and graph /} \<div style={{ display "flex", flexdirection "column", gap "2rem" }}> \<usagebymeterlinegraph withtitle withmeterselector withcontainer /> \<usagebymetertable withtitle withcontainer /> \</div> \</amberfloprovider> ); } export default app;