vbocxjs

vbocxjs

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.

Made with in