React Application Container

This is a basic visual and functional container for your pages. This container includes admin panel design and -if you want - react-router.

You can design your admin panel with basic configurations. You can use custom contents, predefined icons. You can use the panel with the react router with basic configurations.

Installation

node.js:

npm install react-app-container --save

Demo

https://huseyinbuyukdere.github.io/

Example Code

import React from 'react';
import ReactAppContainer from 'react-app-container';

const designConfig = {
  sideBarMenu: [
    {
      iconName: "home",
      label: "Home",
    },
    {
      iconName: "dashboard",
      label: "Dashboard",
    },
    {
      iconName: "apps",
      label: "Applications",
    },
    {
      iconName: "mail",
      label: "Mail",
      subMenuItemList: [
        {
          label: "Send Mail",
          iconName: "post_add",
        },
        {
          label: "List Mail",
          iconName: "post_add",
        },
      ],
    },
    {
      iconComp: <h1>U</h1>,
      label: "Users",
      onClick: () => {
        alert("Users Clicked");
      },
    },
    {
      iconName: "settings",
      label: "Settings",
    },
  ],
  headerMenu: [
    {
      iconName: "room",
    },
    {
      iconName: "language",
      label: "Language",
      subMenuItemList: [
        {
          iconComp: <h4>TR</h4>,
          label: "Turkish",
          onClick: () => {
            alert("Turkish Clicked");
        },
        },
        {
          iconComp: <h4>FR</h4>,
          label: "French",
          onClick: () => {
            alert("English Clicked");
        },
        },
      ],
    },
  ],
  headerLeftContent: (
    <h5
      style={{
        color: "white",
        borderStyle: "solid",
        borderColor: "white",
        borderWidth: "1px",
        padding:'5px'
      }}
    >
      {" "}
      Here is Header Left Content Key. You can add what you want as
      Component
    </h5>
  ),
  sideBarHeaderContent : (
    <h3 style={{fontFamily :'monospace'}}>
      Container & Your Logo
    </h3>
  )
}

const App = (props) => {

  return (
    <ReactAppContainer 
      designConfig = {designConfig} />
  )

}
    
export default App;

Available Props

| Prop | Default | Type | Description | | ------------------------- | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | designConfig| {} | Design Config| Design Configurations for Container | | routes | [] | Array<ContainerRoute>| Routes Configuration in Container for React Router
| children| | Object| Content of the container when routes are empty or null

Design Config

| Prop | Default | Type | Description | | ------------------------- | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | headerMenu| [] | Array<MenuItem> | List of menu shown in header| | sideBarMenu| [] | Array<MenuItem> | List of menu shown in sidebar | | sideBarHeaderContent | | Object | Content for left top of container ( Logo vs) | | sideBarFooterContent | | Object | Content for left bottom of container | | headerLeftContent | | Object| Content for left side of header| | headerRightContent | | Object| Content for right side of header|

Menu Item

| Prop | Default | Type | Description | | ------------------------- | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | label| | String | Label for menu item | | routeKey| | String | Key for connect the menu with the router. When click the menu item, if this key is not empty, the container link to route which has the routeKey in the Routes config . | | iconName| | String | Name of one the predefined icons (, 'api', 'apps' , 'code', 'dashboard', 'expand_less', 'expand_more', 'home', 'info', 'language', 'list', 'mail', 'mediation', 'message', 'perm_idenity', 'post_add', 'radio_button_checked', 'room', 'settings'). | | iconComp| | Object | Custom icon component for menu item| | customComp| | Object | Custom whole menu item component | | onClick| | function | Event when click menu item| | subMenuItemList| | Array<MenuItem> | Sub menu list of menu item|

Container Route

| Prop | Default | Type | Description | | ------------------------- | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | path | | String | Route path of your page (Example : '/home' , '/' , '/settings') | | key| | String | Key for connect the menu with the router. This key will be use in the MenuItem for routing. | | label | | String | Label for show on left side of header | | component| | Object | Your page or content which will show when the route active.|