vbocxjs v3.0.4

Create banners, badges, toasts and more with speed.

vbocxjs is a ReactJS library for creating banners, badges, toasts and more with zero dependencies. It uses inline styling by reducing the amount of look up time for the CSS engine.

Getting Started!

Install vbocxjs

$ npm install vbocxjs
or
$ yarn add vbocxjs

Badges

Default Badge

import { Badge } from "vbocxjs";

<Badge
    type="solid"
    variant="default"
    message="solid"
/>

<Badge
    type="outline"
    variant="default"
    message="outline"
/>

Info Badge

import { Badge } from "vbocxjs";

<Badge
    type="solid"
    variant="info"
    message="solid"
/>

<Badge
    type="outline"
    variant="info"
    message="outline"
/>

Success Badge

import { Badge } from "vbocxjs";

<Badge
    type="solid"
    variant="success"
    message="solid"
/>

<Badge
    type="outline"
    variant="success"
    message="outline"
/>

Warning Badge

import { Badge } from "vbocxjs";

<Badge
    type="solid"
    variant="warning"
    message="solid"
/>

<Badge
    type="outline"
    variant="warning"
    message="outline"
/>

Error Badge

import { Badge } from "vbocxjs";

<Badge
    type="solid"
    variant="error"
    message="solid"
/>

<Badge
    type="outline"
    variant="error"
    message="outline"
/>

Custom Badge

import { CustomBadge, Colors } from "vbocxjs";

<CustomBadge
    type="solid"
    message="solid"
    backgroundColor={Colors["purple-400"]}
    color="#FFFFFF"
/>

<CustomBadge
    type="outline"
    message="outline"
    color={Colors["orange-400"]}
/>

Props

Badges Props

Custom Badge Props

Banners

Default Banner

import { Banner } from "vbocxjs";

<Banner
 variant="default"
  message="This is a Default Banner."
/>

Info Banner

import { Banner } from "vbocxjs";

<Banner
 variant="info"
 message="This is an Info Banner."
/>

Success Banner

import { Banner } from "vbocxjs";

<Banner
 variant="success"
 message="This is a Success Banner."
/>

Warning Banner

import { Banner } from "vbocxjs";

<Banner
 variant="warning"
 message="This is a Warning Banner."
/>

Error Banner

import { Banner } from "vbocxjs";

<Banner
 variant="error"
 message="This is an Error Banner."
/>

Custom Banner

import { CustomBanner, Colors } from "vbocxjs";

<CustomBanner
 message="This is a Custom Banner."
 backgroundColor={Colors["pink-600"]}
 color="#FFFFFF"
 bannerIcon={<i className="fa fa-heart" aria-hidden="true"></i>}
 closeIcon={<i className="fa fa-times" aria-hidden="true"></i>}
/>

Props

Banner Props

Custom Banner Props

Progress

Donut

import { Donut, Colors } from "vbocxjs";

<Donut
    size={80}
    percent={69}
    theme={[Colors["pink-500"], "#000000", Colors["gray-50"]]}
/>

<Donut
    size={100}
    percent={32}
    theme={[Colors["blue-500"], "#000000", Colors["gray-50"]]}
    hidePercentText={true}
/>

<Donut
    size={120}
    percent={54}
    theme={[Colors["green-500"], "#000000", Colors["gray-50"]]}
    curvedEdge={true}
/>

<Donut
    size={140}
    percent={80}
    gradient={["#12c2e9", "#c471ed", "", Colors["gray-50"]]}
    hidePercentText={true}
    curvedEdge={true}
/>

--------------------------------------------------------------------------

{/*
    theme={[
        Completed Background Color,
        Percentage Font Color,
        Remaining Background Color
    ]}
*/}
    
{/*
    gradient={[
        Gradient 1 Color,
        Gradient 2 Color,
        Percentage Font Color
        Remaining Background Color
    ]}
*/}

Kulfi

import { Kulfi, Colors } from "vbocxjs";

<Kulfi
    length={350}
    percent={32}
    theme={["#3DB4EA", "#FFFFFF", Colors["gray-100"]]}
    hidePercentText={true}
/>

<Kulfi
    length={600}
    percent={66}
    gradient={["#DE24B1", "#4C6ADD", "#FFFFFF", Colors["gray-100"]]}
/>

<Kulfi
    length={500}
    percent={88}
    theme={["#D04427", "#FFFFFF", Colors["gray-100"]]}
    curvedEdge={true}
/>

--------------------------------------------------------------------------

{/*
    theme={[
        Completed Background Color,
        Percentage Font Color,
        Remaining Background Color
    ]}
*/}
    
{/*
    gradient={[
        Gradient 1 Color,
        Gradient 2 Color,
        Percentage Font Color
        Remaining Background Color
    ]}
*/}

Props

Donut Props

Kulfi Props

Toasts

Default Toast

import { Toast } from "vbocxjs";

<Toast
 variant="default"
 message="This is a Default Toast."
/>

Info Toast

import { Toast } from "vbocxjs";

<Banner
 variant="info"
 message="This is an Info Banner."
/>

Success Toast

import { Toast } from "vbocxjs";

<Toast
 variant="success"
 message="This is a Success Toast."
/>

Warning Toast

import { Toast } from "vbocxjs";

<Toast
 variant="warning"
 message="This is a Warning Toast."
/>

Error Toast

import { Toast } from "vbocxjs";

<Toast
 variant="error"
 message="This is an Error Toast."
/>

Custom Toast

import { CustomToast, Colors } from "vbocxjs";

<CustomToast
 message="This is a Custom Toast."
 backgroundColor={Colors["pink-600"]}
 color="#FFFFFF"
 toastIcon={<i className="fa fa-heart" aria-hidden="true"></i>}
 closeIcon={<i className="fa fa-times" aria-hidden="true"></i>}
/>

Props

Toast Props

Custom Toast Props

Colors

Note: vbocxjs comes with Font Awesome v4.7 out of the box.