rsl

@syumai/react-sidebar-layout

* react-sidebar-layout provides components which enables 3-pain layout with resizable sidebars.

Showing:

Popularity

Downloads/wk

6

GitHub Stars

6

Maintenance

Last Commit

21d ago

Contributors

0

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-sidebar-layout

  • react-sidebar-layout provides components which enables 3-pain layout with resizable sidebars.

Example

https://syumai.github.io/react-sidebar-layout-examples/basic/build/

screenshot.jpg

Installation

npm install --save @syumai/react-sidebar-layout
# or
yarn add @syumai/react-sidebar-layout

Usage

  • 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

  • Properties can be passed as attributes of SidebarLayout.
  • defaultSidebarWidth: number (default: 200)
  • defaultSecondaryViewWidth: number (default: 200)

Resizer styles

  • color: string (default: transparent)
  • hoveredColor: string (default: #1e90ff)
  • transitionDuration (milli seconds): number (default: 300)
  • width (px): number (default: 6)

Customize Styles

  • 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

Author

syumai

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100