Metroidarons-react-components NPM

Metroidaron's React Components ... .. ... and tools

This project is a collection of various components and tools compartmentalized and put into an NPM package for easy re-use accross packages. I do not intend for these tools to be widely used, but none the less they are open sourced for all to use as you like.

Components:

Containers and their children

Page
The Page is a basic container that wraps its content in a unique ID. Ideally there should only be one page present in the app at a time. To Prevent overlap with ID's from other apps that may be hosted on the web page at the same time, a page will accept a prefix that should be unique to the current app. The Page Component should not be a complex component, but rather a simple component that is used to wrap logical views within the app.
TabbedView
The TabbedView is the parent container for various tabs. The Tabbed view will display tabs that the user can interact with to switch content
TabContent
The TabbedContent container is a child element of the TabbedView Container. This container will house all the contents for a single tab, and should also contain the tab rendering instance so that TabbedView does not have to be concerned with the actual content/words of the tab, it simply gets its view from its TabContent Children.
LayoutManager
The Layout Manager's purpose is to act as a grid system for components to be dropped into. This component will typically be used inside a "Page" component, and should be completely agnotstic to the contet, but should simply provide "zones" that content can be added into, these zones are styled/positioned by the layout manager. Layout managers are typically used when you want to bring many components together on one screena and said components are not aware of their surroundings. Layout managers are also typically used when you want to be able to have multiple layouts for the same page or want one layout to be available to multiple different pages.
List
Some Text Here
ListItem
Some Text Here
Grid
Some Text Here
GridItem
Some Text Here
Form Builder
Some Text Here
FormElement(s)
Some Text Here
Row
This Element will be a responsive row like structure that will allow the developer to place up to six (Pending Number) responsive 'cells' in a horizontal design.
CellWeights={1, 1, 1, 1, 1, 1} : Array : the number represents the weight, width is handled with percentages; the number of numbers represents the number of cells, this example has 6 cells.
className : Array : These Classes will be applied to the row, the user can modify styles of children via common CSS selector practices.
Children : Number of children must equal the number of cells, child 1 will be placed in cell 1 and so on. Children are strictly JSX Elements