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

|Name|Type|Mandatory|Description| |----|----|---------|-----------| |type|solid, outline|yes|Display type of the badge.| |variant|default, info, success, warning, error|yes|The variant of the badge style to use.| |message|string|yes|Message to be displayed.|

Custom Badge Props

|Name|Type|Mandatory|Description| |----|----|---------|-----------| |type|solid, outline|yes|Display type of the badge.| |message|string|yes|Message to be displayed.| |backgroundColor|string, Colors[value]|yes(solid), no(outline)|Background color of badge.| |color|string, Colors[value]|yes|Font Color of Badge.|

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

|Name|Type|Mandatory|Description| |----|----|---------|-----------| |variant|default, info, success, warning, error|yes|The variant of the banner style to use.| |position|top, middle, bottom, XX%|no|Popup out position of the banner.| |message|string|yes|Message to be displayed.| |timer|number|no|Display time of banner in milliseconds.| |animate|fade-in-out, zoom-in-out, stretch-in-out|no|Popup out animation of the banner.|

Custom Banner Props

|Name|Type|Mandatory|Description| |----|----|---------|-----------| |position|top, middle, bottom, XX%|no|Popup out position of the banner.| |message|string|yes|Message to be displayed.| |backgroundColor|string, Colors[<value>]|yes|Background Color of banner.| |color|string, Colors[<value>]|yes|Text Color of banner.| |bannerIcon|JSX.Element, Font Awesome Icons|no|Icon indicating banner type.| |closeIcon|JSX.Element, Font Awesome Icons|no|Icon replacing default close icon.| |timer|number|no|Display time of banner in milliseconds.| |animate|fade-in-out, zoom-in-out, stretch-in-out|no|Popup out animation of the banner.|

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

|Name|Type|Mandatory|Description| |----|----|---------|-----------| |size|number|yes|The size of donut..| |percent|number|no|Progress Percentage..| |theme|array| yes(for flat background)|Theme of donut(explained in component declaration).| |gradient|array|yes(for gradient background)|Gradient combination of donut(explained in component declaration).| |hidePercentText|boolean|no|Show/Hide donut percentage.| |curvedEdge|boolean|no| Rounded Corners of donut.|

Kulfi Props

|Name|Type|Mandatory|Description| |----|----|---------|-----------| |length|number|yes|The length of Kulfi.| |percent|number|no|Progress Percentage..| |theme|array| yes(for flat background)|Theme of Kulfi(explained in component declaration).| |gradient|array|yes(for gradient background)|Gradient combination of Kulfi(explained in component declaration).| |hidePercentText|boolean|no|Show/Hide Kulfi percentage..| |curvedEdge|boolean|no| Rounded Corners of Kulfi.|

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

|Name|Type|Mandatory|Description| |----|----|---------|-----------| |variant|default, info, success, warning, error|yes|The variant of the toast style to use.| |position|top, middle, bottom, XX%|no|Popup out position of the Toast.| |message|string|yes|Message to be displayed.| |timer|number|no|Display time of Toast in milliseconds.| |animate|fade-in-out, zoom-in-out, stretch-in-out|no|Popup out animation of the Toast.|

Custom Toast Props

|Name|Type|Mandatory|Description| |----|----|---------|-----------| |position|top, middle, bottom, XX%|no|Popup out position of the Toast.| |message|string|yes|Message to be displayed.| |backgroundColor|string, Colors[<value>]|yes|Background Color of Toast.| |color|string, Colors[<value>]|yes|Text Color of Toast.| |toastIcon|JSX.Element, Font Awesome Icons|no|Icon indicating Toast type.| |closeIcon|JSX.Element, Font Awesome Icons|no|Icon replacing default close icon.| |timer|number|no|Display time of Toast in milliseconds.| |animate|fade-in-out, zoom-in-out, stretch-in-out|no|Popup out animation of the Toast.|

Colors

|Red|Pink|Purple|Blue|Green|Yellow|Orange|Gray| |--|--|--|--|--|--|--|--| |red|pink|purple|blue|green|yellow|orange|gray| |red-50|pink-50|purple-50|blue-50|green-50|yellow-50|orange-50|gray-50| |red-100|pink-100|purple-100|blue-100|green-100|yellow-100|orange-100|gray-100| |red-200|pink-200|purple-200|blue-200|green-200|yellow-200|orange-200|gray-200| |red-300|pink-300|purple-300|blue-300|green-300|yellow-300|orange-300|gray-300| |red-400|pink-400|purple-400|blue-400|green-400|yellow-400|orange-400|gray-400| |red-500|pink-500|purple-500|blue-500|green-500|yellow-500|orange-500|gray-500| |red-600|pink-600|purple-600|blue-600|green-600|yellow-600|orange-600|gray-600| |red-700|pink-700|purple-700|blue-700|green-700|yellow-700|orange-700|gray-700| |red-800|pink-800|purple-800|blue-800|green-800|yellow-800|orange-800|gray-800| |red-900|pink-900|purple-900|blue-900|green-900|yellow-900|orange-900|gray-900|

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