agilite-react

---

A ReactJS module that allows you to create a customizable SPA (Single Page Application), with tabbing, menu navigation, Ant Design library and integration into Agilit-e.

Installation 🔨

Using NPM:

``js
npm install agilite-react --save-dev
`


Usage 💻

Import the AgiliteReact Component
`js
import AgiliteReact from 'agilite-react'
`

Basic Rendering of Component
- When the component is rendered without any properties, default values are used to render a simple SPA

`js
import React from 'react'
import ReactDOM from 'react-dom'
import AgiliteReact from 'agilite-react'

ReactDOM.render(
,
document.getElementById('root')
)
`

Advanced Rendering of Component with state

In order to customise the AgiliteReact component, declare a JavaScript Object and add it as a state prop to the component:

`js
import React from 'react'
import ReactDOM from 'react-dom'
import AgiliteReact from 'agilite-react'

function TestComponent () {
return (


)
}

const state = {
rootContent: TestComponent,
toolbar: {
enabled: true,
title: 'My Toolbar Title'
}
}

ReactDOM.render(
,
document.getElementById('root')
)
`
Below is a detailed rundown of the state props that can be passed to the AgiliteReact component:

- [state]() [object]: The JavaScript Object to be passed as the AgiliteReact component state (see example above)
- [rootContent]() [React.ReactNode]: Primary content that is rendered on load of the Application
- [theme]() [object]: Theme object - default theme below
`js
{
primary: '#d32f2f',
primaryLight: '#ff6659',
primaryDark: '#9a0007',
secondary: '#e0e0e0',
secondaryLight: '#ffffff',
secondaryDark: '#aeaeae'
}
`
- [leftMenu]() [object]: Left menu properties
- [leftMenuTitle]() [string]: Menu title
- [leftMenuEnabled]() [boolean]: Enable/Disable Menu
- [menuItems](): Array of Menu Item Objects, example below
`js
[
{
key: 'todos', // string - Menu Item Key
title: 'Todo', // String/React.ReactNode
children: [ // Sub Menu Items
{
key: 'all_todos',
title: 'All Todos' // String/React.ReactNode
}
]
}
]
`
> Note: Menu items can contain children properties to nest sub menus
- [visible](): [boolean]: Control when the menu drawer is open or closed
- [onLeftMenuOpen](): [function(event)]: This function is called whenever the menu is opened, state can be used here to set the visible property accordingly
- [onLeftMenuClose](): [function(event)]: This function is called whenever the menu is closed, state can be used here to set the visible property accordingly
- [onLeftMenuItemClick](): [function(event)]: This function is called whenever a menu item is clicked, the event contains a key property which matches the key of the clicked menu item
- [expandedMenuItems]() [array(string)]: Array containing the sub menu item key(s) that have to be expanded by default
> Note: All the 'leftMenu' rules apply for the 'rightMenu'
- [toolbar]() [object]: Toolbar at the top of the application
- [enabled]() [boolean]: Whether the toolbar is enabled/disabled
- [title]() [string]: The toolbar title
- [customMenus]() [object]: Custom menus within the toolbar (see example below)
`js
customMenus: {
content: SignOutIcon // React.ReactNode || String
}
`
- [tabNavigation]() [object]: Application tab navigation configuration
- [enabled]() [boolean]: Whether tab navigation is enabled/disabled
- [activeKey]() [string]: Active tab key
- [animated]() [boolean]: Animated Tabs
- [rootTabKey]() [string]: Key of the root tab
- [rootTabTitle]() [string]: Title of the root tab
- [tabs]() [array]: Array containing tab objects (below is an example of a tab object)
`js
{
key: 'users', // string - Tab key
closeable: true, // boolean - Whether the tab is closeable
title: 'Users', // string - Tab title
content: Users // React.ReactNode - The content of the tab
}
`
- [onTabChange]() [function(key)]: This function is called whenever a tab is clicked, the clicked tab key is passed to the function
- [onTabClose]() [function(key)]: This function is called when the close icon on a tab is clicked, the key of the tab requesting to close is passed to the function

---
Below is an example of the default configuration


`js
import React from 'react'
import ReactDOM from 'react-dom'
import AgiliteReact from 'agilite-react'

function RootContent () {
return (


)
}

const state = {
rootContent: RootContent,
theme: {},
leftMenu: {
leftMenuTitle: 'Left Menu',
leftMenuEnabled: true,
menuItems: [],
visible: false,
onLeftMenuOpen: () => { },
onLeftMenuClose: () => { },
onLeftMenuItemClick: () => { },
expandedMenuItems: []
},
rightMenu: {
rightMenuTitle: 'Right Menu',
rightMenuEnabled: true,
menuItems: [],
visible: false,
onRightMenuOpen: () => { },
onRightMenuClose: () => { },
onRightMenuItemClick: () => { },
expandedMenuItems: []
},
toolbar: {
enabled: true,
title: 'Agilit-e React',
customMenus: {
content: null
}
},
tabNavigation: {
enabled: true,
rootTabKey: 'home',
rootTabTitle: 'Home',
activeKey: 'home',
animated: true,
tabs: [],
onTabChange: () => { },
onTabClose: () => { }
}
}

ReactDOM.render(
,
document.getElementById('root')
)
``