vbocxjs

A ReactJS library for creating awesome banners, badges, toasts and more.

Usage no npm install needed!

<script type="module">
  import vbocxjs from 'https://cdn.skypack.dev/vbocxjs';
</script>

README

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 🇮🇳