Frox-ui NPM | npm.io

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