agilite-react
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published

    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:

    npm install agilite-react --save-dev

    Usage 💻

    Import the AgiliteReact Component

    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
    import React from 'react'
    import ReactDOM from 'react-dom'
    import AgiliteReact from 'agilite-react'
    
    ReactDOM.render(
      <AgiliteReact />,
      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:

    import React from 'react'
    import ReactDOM from 'react-dom'
    import AgiliteReact from 'agilite-react'
    
    function TestComponent () {
      return (
        <div>Hello World</div>
      )
    }
    
    const state = {
      rootContent: TestComponent,
      toolbar: {
        enabled: true,
        title: 'My Toolbar Title'
      }
    }
    
    ReactDOM.render(
      <AgiliteReact state={state} />,
      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
      {
        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
          [
            {
              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)
        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)
        {
          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

    import React from 'react'
    import ReactDOM from 'react-dom'
    import AgiliteReact from 'agilite-react'
    
    function RootContent () {
      return (
        <div>Root Content</div>
      )
    }
    
    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(
      <AgiliteReact state={state} />,
      document.getElementById('root')
    )

    Install

    npm i agilite-react

    DownloadsWeekly Downloads

    99

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    71.8 kB

    Total Files

    49

    Last publish

    Collaborators

    • agilite