The Blip UI component library for React
This library consists of a pre-built UI component for rendering a list of bills from the Blip API.
The library currently includes a BillList
component which can optionally be styled for seamless integration into a React project.
Table of contents
Installation
First, install the npm package using yarn
or npm
:
npm i @bliplabs/react
# - OR -
yarn add @bliplabs/react
Usage
Import Blip's BillList
component in your project:
import { Bill, BillList, BillListConfig } from '@bliplabs/react';
The component requires data from the Blip API in order to render actual information. To do this, simply pass an object that contains an array of bills straight from Blip's API - we recommend using the Blip Quickstart to replicate the below data:
const bills: Bill[] = [
{
name: 'Netflix',
merchant_id: 'c352a66b-c667-4e0a-8a3d-eac3a0f1871b',
amount_mean: 10,
transactions_count: 5,
categories: ['subscriptions'],
frequency: 30,
expected_due_date: '2020-01-23',
enduser_oid: '35f83baa-77d3-4cae-80c1-45d1984a185d',
amount_median: 10,
amount_std: 0,
amount_total: 50,
amount_min: 10,
amount_max: 10,
first_transaction_date: '2019-08-24',
last_transaction_date: '2019-12-24',
is_manual: false,
merchant: {
name: 'Netflix',
logo_url:
'https://cdn.tryblip.com/logos/billers/blr_kIblcVj74PladXcpVvZGO.jpg',
login_url:
'http://api.bliplabs.com/v2/links/bill/c3480ecc-fdac-48da-bd82-0c32f9137344/merchant/login_url',
billpay_url: null,
phone: null,
email: null,
},
id: 'c3480ecc-fdac-48da-bd82-0c32f9137344',
is_bill: true,
},
];
Now, plug it in!
<BillList bills={bills} />
Configure styles
The component is built with a default design which can then be customized by passing in a configuration object with variables to override the defaults and style the BillList
to fit the look and feel of your application.
const config: Partial<BillListConfig> = {
billBackgroundColor: 'white',
billBorderRadius: 12,
billPadding: 20,
logoBorderRadius: 6,
iconColorCalendar: 'orange',
iconColorFrequency: 'orange',
iconColorBillpay: 'lightgreen',
colorMerchantName: 'black',
colorAmount: 'black',
colorFrequency: 'orange',
colorDueDate: 'gray',
};
Passing the configuration object into the component will style the list accordingly.
<BillList bills={bills} config={config} />