@nvus/nvus-react NPM

React Component that scaffolds out a basic dashboard layout in a windowed environment.

The NVUS-React MenuModel

The NVUS-React component takes in a single property: An array of NVUS Menu Models.

Each Menu Model is consists of a title and an array of MenuItems.

Each MenuItem consists of:

title: String The Name of the Component
icon: A ReactNode representing the icon to use alongside the title
child: A ReactNode child that represented the component to render in the body of the window.
optionalParams: An object that represents optional window properties to override.
1. minW?: The minimum width of the window
2. minH?: The minimum height of the window
3. width?: The width of the window at open
4. height?: The height of the window at open

If a single Menu Model object is passed in the array, NVUS-React will not render the paging arrows in the menu bar.

It is the goal of this developer to make this model as open as possible yet there are some items (ex: the icon) where it is preferred to limit the type. However the current scope of the project is to produce a minimum viable solution as to solicit feedback and critique from the public at large.

Install

1. Install from NPM/Yarn

yarn add @nvus/nvus-react

2. Create local typings file and place in directory 'typings'

declare module '@nvus/nvus-react';

3. Import typings file into tsconfig.json

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "./node_modules/@types/",
      "./typings"
    ]
  },

Steps 2 and 3 are short-term measures until package types are accepted into @types.

Usage

const mainMenu = [
    {
        title: 'Test Title',
        menuItems: [
            {
                label: 'Component A',
                icon: <FontAwesomeIcon icon={faUser} />,
                child: <ComponentA></ComponentA>,
            },
            {
                label: 'Component B',
                icon: <FontAwesomeIcon icon={faMap} />,
                child: <ComponentB></ComponentB>,
            },
        ],
    },
    {
        title: 'Test Title Too',
        menuItems: [
            {
                label: 'Component C',
                icon: <img src="./logo192.png" alt="" />,
                child: <ComponentC></ComponentC>,
            },
            {
                label: 'Component D',
                icon: <FontAwesomeIcon icon={faPlus} />,
                child: <ComponentD></ComponentD>,
            },
        ],
    },
]

return (
    <div>
        <NvusReact items={mainMenu} />
    </div>
)