- react-sidebar-layout provides components which enables 3-pain layout with resizable sidebars.
https://syumai.github.io/react-sidebar-layout-examples/basic/build/
npm install --save @syumai/react-sidebar-layout
# or
yarn add @syumai/react-sidebar-layout
- import SidebarLayout, Sidebar, PrimaryView, SecondaryView components from this package.
- Use it in your application like below.
- Sidebar / PrimaryView / SecondaryView are just a container component which can contain any contents.
import { PrimaryView, SecondaryView, Sidebar, SidebarLayout } from "react-sidebar-layout";
const SidebarContent = () => (
<header>Sidebar</header>
);
const PrimaryViewContent = () => (
<header>Primary view</header>
);
const SecondaryViewContent = () => (
<header>Secondary view</header>
);
const App = (): JSX.Element => {
return (
<SidebarLayout defaultSidebarWidth={200} defaultSecondaryViewWidth={250}>
<Sidebar><SidebarContent /></Sidebar>
<PrimaryView><PrimaryViewContent /></PrimaryView>
<SecondaryView><SecondaryViewContent /></SecondaryView>
</SidebarLayout>
);
};
- Properties can be passed as attributes of
SidebarLayout
.
defaultSidebarWidth
: number (default: 200)defaultSecondaryViewWidth
: number (default: 200)
color
: string (default: transparent)hoveredColor
: string (default: #1e90ff)transitionDuration
(milli seconds): number (default: 300)width
(px): number (default: 6)
- Components have its class name. Please write and attatch styles to its class name.
- SidebarLayout:
.sidebar-layout
- Sidebar:
.sidebar-layout .sidebar
- PrimaryView:
.sidebar-layout .primary-view
- SecondaryView:
.sidebar-layout .secondary-view
- SidebarLayout:
syumai
MIT