@nav-matrix/ui-components NPM

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

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

The page will reload when you make changes.\ You may also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.\ See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.\ It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\ Your app is ready to be deployed!

See the section about deployment for more information.

Description

This repo contains the UI components.
This is made using basic HTML tags and CSS is given through bootstrap.
Bootstrap CDN needs to be updated on regular basis.

Components -

Accordian - The accordion is a component that organizes content within collapsable items.
Button - The Button is a component that renders a button with different styles.
Checkbox - Checkboxes are used to select one or several options in a list.
Col - Grid columns are created by specifying the number of twelve available columns you wish to span.
Container - Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
DataList - It is used to provide an "autocomplete" feature for all elements. Users will see a drop-down list of pre-defined options as they input data. In short it is a searchable dropdown.
DatePicker - It is used to select a date from a calendar.
Div - It is a copy of div tag which defines a division or a section.
Form - It is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
H1 - H6 - H1 defines the most important heading. H6 defines the least important heading. Note: Only use one H1 per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with H1 , then use H2 , and so on.
Hr - This tag is used to create a horizontal line.
Image - It is used to embed an image.
Input - This tag specifies an input field where the user can enter data,
Label - It is used to define a label for several elements like text fields, checkboxes, radio buttons, submit buttons, etc.
List -Lists are used to specify lists of information. All lists may contain one or more list elements.
Modal - The Modal component is a dialog box/popup window that is displayed on top of the current page.
Multiselect - It is used to select multiple options.
Navbar - It is used to design a navbar.
NavigationProvider - It is used to return toast provider which controls display of toasts as notifications.
NumbericInput - It defines the field for entering a number.
Paragraph - This element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
RadioButton - Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.
Row - Is an essential element in the bootstrap grid system to hold the column class.It is used for horizontal partition in the container class of the web application.
SearchableSelect - Select menus are used if you want to allow the user to pick from multiple options and search through them.
Select - Select menus are used if you want to allow the user to pick from multiple options.
Span - It is a copy of span tag which is a generic inline container element.
Spinner - It is used to show the loading state.
Table - This is used to render a table with sortable columns and rows.
Tabs - Tabs separate data in the same wrappers but different panes.
TextArea - It defines a multi-line text input control.
Toasts - This component is like an alert box that is only shown for a couple of seconds when something happens.
Tree - This component is used to render tree like structure.
Vr - This tag is used to create a vertical line.

Hooks

useNotification - used to provide context wrapper for NotificationProvider has functions to show notifications (error,info,warning and success)
useMultiselect - provides handle for MultiSelect component
useOnClickOutside - hook to invoke callback when click outside the provided component.

Functions