@piggytechng/component-library NPM

piggytech-ui-component-library

Piggytech Internal UI Component Library based

Brief

This is a collection of various piggytech UI components built by the Piggytech Frontend Engineering team for faster and simpler web UI development.

Questions

For help and support questions, please reach out to us. This issue list of this repo is exclusively for bug reports and feature requests.

Note

Component lib version ~0.9.0 is compatible with typescript version ~3.7.2, while component lib version ~1.0.0 is a breaking change that makes use of typescript ~4.7.0.

Features

Make XMLHttpRequests from the browser

Browser Support


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

Installing

//npm
$ npm install piggytech-ui-component-library

//yarn
$ yarn add piggytech-ui-component-library

//pnpm
$ pnpm add piggytech-ui-component-library

//bower
$ bower install piggytech-ui-component-library

Components

See full usage examples here from the browser.

Alert

This is used for showing alerts to the user

import {Alert} from "@piggytech-ui-component-library"

// usage examples
Alert.success("You have successfully. Done that");
Alert.info("You have successfully. Done that");
Alert.error("You have successfully. Done that");
Alert.alert("loading", "qwertyu");

type "success" | "error" | "info" | "loading" | "warn" options header: optional, actionBtnText: optional, message: String

Button
Demo
```
import {Button} from "@piggytech-ui-component-library"

//usage examples
<Button>Piggyvest</Button>
<Button color="#000">Blackbell</Button>
```
Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |id | string | Id selector | no| | |variant |"primary","secondary","tertiary"| button type |no|"primary"| |type |"button","reset","submit"| specify type of button default is "button" |no|"button"| |className | string | custom css |no|| |disabled|boolean|Removes the ability to click or target the component|no|false| |loading|boolean|disables button and shows a loader on it|no|false| |color|string|specify button color|no|"#0d60d8"| |children|ReactNode|This accepts slot components/html|no|| |borderRadius|string|change button border radius|no||
|style|CSSProperties|custom css for target button|no|{}|
Note: other button native attributes like "onClick" are still accessable

Input
Demo
```
import {Input} from "@piggytech-ui-component-library"

//usage examples
<Input></Input>

<Input
 label="Tap here & enter .. (e.g 5000)"
 style={{ background: "whitesmoke" }}
 placeholder="Tap here & enter .. (e.g 5000)"
/></Input>
```
Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |id | string | Id selector | no| | |label|string|set the label for the input field|no|| |placeholder|set placeholder text for the input field|| |name|set name for the input field|no|| |type|can be "email", "text", "number" and so on (refer to native types)|no|"text"| |autofocus|automatically focus on the input when it is rendered|no|false| |value|"string" or "number"|set default value for input|no|| |style|CSSProperties|css styling for the input|no|| |labelStyle|CSSProperties|css styling for the input label|no|| |icon|boolean|show icon inside input|no|false| |disabled|boolean|change interaction with component|no|false| |rounded|boolean|add border radius to component|no|false| |borderRadius|string|set border radius of element|no|"5px"| |color|string|set input color of element|no|| |outlineColor|string|set outline color of input|no|| |backgroundColor|string|set background color of element|no|| |height|string|set height of input|no|| |width|string|set width of input|no|"100%"| |onChange|method|a callback functions that brings out the value inputed|no||
Note: other input native attributes like "onClick" are still accessable

Textarea
Demo
```
import {Textarea} from "@piggytech-ui-component-library"

//usage examples
<Textarea></Textarea>

<Textarea
 name="business-address"
 label="Business Address"
 style={{ background: "whitesmoke" }}
 placeholder="Enter your business address"
></Textarea>
```
Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |id | string | Id selector | no| | |label|string|set the label for the input field|no|| |placeholder|set placeholder text for the input field|| |name|set name for the input field|no|| |autofocus|automatically focus on the input when it is rendered|no|false| |value|"string" or "number"|set default value for input|no|| |style|CSSProperties|css styling for the input|no|| |labelStyle|CSSProperties|css styling for the input label|no|| |disabled|boolean|change interaction with component|no|false| |rounded|boolean|add border radius to component|no|false| |borderRadius|string|set border radius of element|no|"5px"| |color|string|set input color of element|no|| |outlineColor|string|set outline color of input|no|| |backgroundColor|string|set background color of element|no|| |height|string|set height of input|no|| |width|string|set width of input|no|"100%"| |onChange|method|a callback functions that brings out the value inputed|no||
Note: other textarea native attributes like "onClick" are still accessable

Select
Demo
```
import {Select} from "@piggytech-ui-component-library"

//usage examples
<Select></Select>

<Select
 name="business-type"
 label="Business Type"
 style={{ background: "whitesmoke" }}
 options={['Fintech','Edtech']}
 placeholder="Select your business type"
></Select>
```
Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |id | string | Id selector | no| | |label|string|set the label for the input field|no|| |placeholder|set placeholder text for the input field|| |name|set name for the input field|no|| |value|"string"|set default value for target component|no|| |style|CSSProperties|css styling for the target component|no|| |labelStyle|CSSProperties|css styling for the input label|no|| |isDisabled|boolean|change interaction with component|no|false| |borderRadius|string|set border radius of element|no|"5px"| |color|string|set input color of element|no|| |selectedColor|string|set the selected option color of element|no|| |outlineColor|string|set outline color of input|no|| |backgroundColor|string|set background color of element|no|| |height|string|set height of input|no|| |width|string|set width of input|no|"100%"| |options|Array|refer to react-select component options|no|| |onChange|method|a callback functions that brings out the value inputed|no||

Checkbox
Demo
```
import {Checkbox} from "@piggytech-ui-component-library"

//usage examples
<Checkbox></Checkbox>

<Checkbox  label="Keep me logged in", color="#f72585"></Checkbox>
```
Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |label|string|The label shown alongside the checkbox|yes|| |checked|boolean|state of the checkbox|no|false| |color|string|color of the checkbox when active|no|| |onChange|event|callback function returning the state of the checkbox when acted upon|no||

Switch
Demo
```
import {Switch} from "@piggytech-ui-component-library"

//usage examples
<Switch></Switch>

<Switch value={true} color="#f72585"></Switch>
```
Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |color|string|color for the switch when it is active|no|| |value|boolean|set default state of the switch|no|false| |outlineColor|string|set outline color of element|no|| |containerStyle|CSSProperties|css styling for the input|no|| |onChange|event|callback function returning the state of the element when acted upon|no||

Modal
Demo
```
import {Modal} from "@piggytech-ui-component-library"

//usage examples
<Modal></Modal>

<Modal isOpen={true} >

</Modal>
```
Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |id | string | Id selector | no| | |showOverlayBackgroundColor|boolean|show overlay back|no|false| |outlineColor|string|set outline color of element|no|| |contentStyle|CSSProperties|css styling for the modal body|no|| |overlayStyle|CSSProperties|css styling for the modal overlay|no|| |children|ReactNode|This accepts slot components/html|no|| |onRequestClose|event|callback function called when the modal is cloed|no||

Loader
```
import {Loader} from "@piggytech-ui-component-library"

//usage example
<Loader color="#f72585"></Loader>
```
Props | name | Type | Description |Required|Default| |-------------|-----------------------|---------------------------|--------|-------| |color|string|color of the loader|no||