Embeddable UI Kit - React.js

embeddable ui components for react js applications the amberflo ui kit is a react component library for amberflo accounts to be able to consume and make use of principal amberflo views, for one of their customers, on their own site if you are trying to use this widgets on a non react js environment, you can use the ui sdk vanilla javascript integration docid\ ija zqfgfvhil daekg6u as well 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 provider component that needs to wrap your app, so the components can hit our api it requires a customer specific session and a theme you can check here how to get session token docid\ b969ekzpqb4ddzaiadzgkembeddable ui kit react js docid\ w1gheudt e5c1ebzvan3a ", 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 have added some class names to most of our components, you will be able to identify them, once they are placed on your app, by the starting name of aflo you can use this classes along with the material ui classes in your own css file 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 heavily typed, which will allow, if you use typescript on your project, to easily see which kind of properties a component receives, or what would return a specific function or hook invoice related options there are a few ui kit components that display invoice related data (i e invoice list, invoice details, invoice pdf) there are invoice related settings a user can update at amberflo | settings | invoice https //ui amberflo io/settings/invoice which affect how invoices are displayed through ui kit components (as well as the customer portal and in the main app) the current available option/settings are displaying cached invoices invoice data displayed will either be cached data or real time data cached data is used to speed up how quickly invoice data can be retrieved group product items on invoices we list all product items and allow user to create categories to group on the invoices how to read how to use the react js widgets docid\ htcorwrx2 pqgpfwkv5 a read how to use hooks docid\ rmq8uycxubjeay1offnc6 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;