FroxUI

A React component library for building user interfaces.

Usage

npm install frox-ui # or yarn add frox-ui

import React from 'react'
import { Theme, GlobalStyle, useGlobalTheme  } from 'frox-ui'

export const YourApp = () => {
  const { globalTheme } = useGlobalTheme();
  return (
    <Theme globalTheme={globalTheme}>
      <GlobalStyle />
      // Your code goes here
    </Theme>
  );
};

Components

Button

Prop	Description	Optional/Required
size	Button size ◦ Can be large, medium or small	required
color	Button color ◦ Can be primary, secondary, success, error, info or warning	required
icon	If you need an icon on your button, set to determine whether the icon will be to the left or right of the button text ◦ Can be 'left' or 'right'	optional
disabled	Disable button ◦ Can be true or false	optional
type	Button type ◦ Can be button, submit or reset	optional
onClick	Function that determines what will happen when the button is pressed	optional
iconUrl	String path to the icon	optional
flashOnHover	Determines whether the flash when the mouse pointer hover the button ◦ Can be true or false	required

---

Checkbox

Prop	Description	Optional/Required
id	Checkbox unique identifier ◦ Should be string	required
label	Defines a label for checkbox ◦ Should be string	optional
checked	Defines whether the checkbox is checked or not ◦ Can be true or false	optional
onChange	Function to control the checkbox ◦ Can take as argument ChangeEvent<HTMLInputElement>	optional

---

Container

Prop	Description	Optional/Required
size	Container size ◦ Can be large which max-size is 1530px or small which max-size is 1240px	required
children	Children of the container ◦ Should be React.ReactNode	required

---

CustomSelect

Prop	Description	Optional/Required
options	Select options array ◦ Should contain objects with label which is string and value which is string	required
handleChangeSelect	Function to manage select. Take selected value as argument	required
defaultValue	Select value which displays by default ◦ Can be options array or null	optional
placeholder	Select placeholder ◦ Should be string	required
isDisabled	Disable select ◦ Can be true or false	optional

---

Input

Prop	Description	Optional/Required
inputSize	Input size ◦ Can be large or small	required
label	Defines a label for input ◦ Should be string	required
onEnter	Function that determines what will happen when the Enter button is pressed	optional
leftIconSrc	String path to the left input icon	optional
rightIconSrc	String path to the right input icon	optional
id	Input unique identifier ◦ Should be string	required

---

Loader

Prop	Description	Optional/Required
There are no props for this component	Preloader for your application

---

ModeSwitcher

Prop	Description	Optional/Required
handleChange	Function to change theme ◦ Should be handleChangeTheme extracted from useGlobalTheme hook	required

---

Sidebar

Prop	Description	Optional/Required
sidebarLinks	Sidebar links array ◦ Should contain objects with label which is string, icon, notification which is string or number and linkTo (the path that the link leads to) which is string	required
sidebarButtons	Sidebar buttons array ◦ Should contain objects with label which is string and icon	required
logoSrc	Path to logo image ◦ Should be string	required
logoAlt	Alternative text for logo ◦ Should be string	required
handleChangeTheme	Function to change theme ◦ Should be handleChangeTheme extracted from useGlobalTheme hook	required
logoLinkTo	Link to the page that logo leads to ◦ Should be string	required
logoName	Name of the logo ◦ Should be string	optional

---

Table

Prop	Description	Optional/Required
tableData	Table data array	required
headerItems	Table header items array	required
tableDataCallback	Function that will be map in table body. Provide inside <Row /> component <Cell /> components with your data	required