@prasiddha/react-appshell NPM

@prasiddha/react-appshell

@@prasiddha/react-appshell provides you with the base template for your application. It has navbar, sidebar and a section where your main app goes.

Installation

Use the package manager npm to install @prasiddha/react-image-loader.

npm install @prasiddha/react-appshell --save

Usage

With @prasiddha/react-appshell you can create a basic drawer layout instantly.

You can find the template for the App Shell at: https://github.com/Prasiddha22/react-appshell-tempate

import { AppShell } from '@prasiddha/react-appshell';

const App = () => {
  return (
    <AppShell
      sidebarOpen={sidebarOpen}
      sidebarBackgroundColor={'#f8fafb'}
      sidebarHeader={<SidebarHeader />}
      sidebarContent={<SidebarContent />}
      sidebarFooter={<SidebarFooter />}
      sidebarOpenedWidth={'300px'}
      sidebarClosedWidth={0}
      navbarContent={<NavContent />}
      navbarFullWidth={false}
    >
      {/* <AppPrimo /> */}
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id atque dolorem
      doloremque ullam repellendus assumenda ratione eveniet, vel blanditiis vitae
      repellat neque inventore quaerat. Aperiam doloribus autem nihil alias veritatis!
    </AppShell>
  );
};

export default App;

Props

Property	Required	Default value	Description
`navbarContent?: React.ReactNode`	no		Your navbar content
`navbarFullWidth?: boolean`	no	false	Determine if the navbar will be of full width or not
navbarPosition?: 'static' \| 'relative' \| 'absolute' \| 'sticky' \| 'fixed' \| undefined	no	'sticky'
`sidebarBackgroundColor: string`	no	white	Sidebar background color
`sidebarHeader?: React.ReactNode`	no		Sidebar Header
`sidebarContent: React.ReactNode`	yes		Main content of Sidebar
`sidebarFooter?: React.ReactNode`	no		Sidebar Footer
sidebarOpenedWidth?: number \| string	no	'250px'	Width when the sidebar is open
sidebarClosedWidth?: number \| string	no	'0px'	Width when the sidebar is close
`sidebarTransitionDuration?: number`	no	0.5	transition duration for the sidebar open and close
`sidebarOpen: boolean`	yes	true	sidebar open/close state
sidebarBreakpoint?: 'sm' \| 'md' \| 'lg' \| 'xl'	no	'sm'	breakpoint where sidebar will be detached from the main body and acts more like drawer