fastsh-react-component

BootStrap Fast.sh

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.

The page will reload if you make edits.

Button Component

<Button>

A customizable button with a label, a background color, an active state and an icon.

<Button
  icon={null}
  isActive
  label="Primary Button"
  onClick={() => {}}
  type={ButtonType.Primary}
/>

Props	Description	Default	Type
icon	FontAwesome iconDefinition for the button icon	true	Object
isActive	Indicates if the button is in an active state	true	Boolean
label	Text label displayed on the button	""	String
onClick	Function triggered on button click	() => {}	Function
type	Style type of the button (e.g., Primary, Secondary)	ButtonType.Primary	Enum

• ButtonType.{options}:

  • Primary
  • Secondary
  • Disabled
  • Outline
  • PanelPrimary
  • PanelSecondary
  • Back
  • Modify

• Behavior Without type:

  • The button will have no background.
  • The text color will be default to Cerulean.
  • An underline will appear when you hover over the button.

EntityPanel Component

<EntityPanel>

An Entity Panel that contains the User informations.

<EntityPanel
  email="[e-mail]"
  username="user"
/>

Props	Description	Default	Type
email	Email of the User	""	String
username	Username of the User	""	String

TextField Components

<SearchBar>

An input with an icon on the right.

• Props:
  • onChange: callback fired when the value is changed.
  • placeholder (optional): Text that appears in the form control when it has no value set.
  • disabled (optional): Whether the form control is disabled (true | false).
  • icon (optional): Display a icon on the right.

Example:

<SearchBar
    onChange='{() => {
      console.log("Changed");
    }}'
    disabled="{false}"
    placeholder="Search"
    icon="{faClose}"
/>

<Input>

An input with a label and a hint.

• Props:
  • onChange: callback fired when the value is changed.
  • placeholder (optional): Text that appears in the form control when it has no value set.
  • disabled (optional): Whether the form control is disabled (true | false).
  • label (optional): The label that appears above the input.
  • hint (optional): Text that appears below the input.

Example:

<input
    onChange='{() => {
      console.log("Changed");
    }}'
    disabled="{false}"
    placeholder="Search"
    icon="{faClose}"
    label="Email"
    hint="Hint text"
/>