Library of developed components of React JS
Dependencies: none
Input props: url, text and iconClassName
Description: icon + text logo
Dependencies: none
Description: menu of static items
Dependencies: none
Input props:
navlinks object array =
[ ... , {url: ... , title: ... , className: ...} , ... ]
Description: responsive navbar with single-level dynamic navlinks and toggle hamburger menu.
Dependencies: Logo and Navbar
Input props: mail and navlinks(check Navbar)
Description: 2 rows Header, with Logo and Navbar Components on the 1st row and Contact mail on the 2nd row.
Dependencies: none
Description: dropdown selection box with dynamic options
Dependencies: Dropdown
Description: Form in the shape of a grid component divided in sections. Grid is composed of the variable label, input textbox for the variable value and a dropdown selection box for variable unit selection. Variables values and units are set as states, and the fields are passed automatically through two Objects( data ans conversionFactors )
#TODO: Automate links and buttom creation from data
Dependencies: none
Input props: position
Description: Container that sets floar buttom position
Dependencies: none
Input props: tooltip, icon, rotates and styles(optional)
Description: buttom that shows the links when clicked or hovered by.
Dependencies: none
Input props: tooltip, icon, href and styles(optional)
Description: link that are shown when buttom is clicked or hobered by.
Dependencies: none
Description: card with a image in the top, a card title, a card description and a button into the bottom
Dependencies: none
Description: News box that has a text and a image, with the option to change the side of the image and the text.
Dependencies: none
Description: Video Card that has a video based on a youtube link, the title of the video and the description of the video.
Dependencies: none
Description: Accordion Panel.
Dependencies: none
Description: A line element that has the title, year and the link for the reference.
Dependencies: gridActionIcon
Description: A grid that changes size with the screen and has action buttons for each row.
Dependencies: Link from "react-router-dom"
Description: A grid that changes size with the screen and has action buttons for each row.
Dependencies: none
Description: A group of radio buttons working as a single selection entry.
Dependencies: none
Description: A single radio button.
Dependencies: Toast Context
Description: A message card that enters floating the screen and disappears after some times.
Dependencies: createContext from React
showToast from possibleAlerts(usually in the Toast folder).
Description: Creates a context, so the actions performed by the components in different app sections can be seen by the Toast.
Dependencies: AuthContext
Route, Redirect from "react-router-dom"
Description: Routes to be used with Router-DOM, but with authentication protection.
Dependencies: createContext from React
useAuth
Description: Creates a context, so the actions performed by the components in different app sections can be seen by the Toast.
Dependencies: none
Description: Hook to easy authentification by JWT in localstorage.
Dependencies: ModauContext
ReactDOM from "react-dom"
Link from "react-router-dom"
Description: Modal window(blocking the app behind) that opens to give a warning or to ask confirmation.
Dependencies: createContext from React
Description: Creates a context, so the components in different app sections can access the Modal call.