WieldyLayout

Overview

The WieldyLayout component provides a flexible and customizable layout solution for your React applications. It is built using Ant Design's Layout components and is highly configurable via styles, classes, and layout options. The WieldyLayout supports a modular architecture for the header, footer, sidebar, and content areas, allowing developers to create dynamic and adaptive layouts effortlessly.

---

Usage

Here is a basic example of how to use the WieldyLayout component:

import React from "react";
import { WieldyLayout } from "./WieldyLayout";

const layoutConfig = {
  styles: {
    header: { backgroundColor: "#fff" },
    sidebar: { backgroundColor: "#f0f2f5" },
  },
  classes: {
    root: "custom-root-class",
  },
  layoutOptions: {
    header: { fixed: true },
    sidebar: { hidden: false, fixed: true },
    footer: { hidden: false },
  },
};

const App = () => (
  <WieldyLayout
    header={<div>Header Content</div>}
    sidebar={<div>Sidebar Content</div>}
    footer={<div>Footer Content</div>}
    styles={layoutConfig.styles}
    classes={layoutConfig.classes}
    layoutOptions={layoutConfig.layoutOptions}
  >
    <div>Main Content</div>
  </WieldyLayout>
);

export default App;

---

Props

The WieldyLayout component accepts the following props:

header

• Type: React.ReactNode

• Description: Content to render in the header.

• Optional: Yes

footer

• Type: React.ReactNode

• Description: Content to render in the footer.

• Optional: Yes

sidebar

• Type: React.ReactNode

• Description: Content to render in the sidebar.

• Optional: Yes

rightSidebar

• Type: React.ReactNode

• Description: Content to render in the right sidebar.

• Optional: Yes

styles

• Type: WieldyLayoutStyles

• Description: Inline CSS styles for various layout sections.

• Optional: Yes

classes

• Type: WieldyLayoutClasses

• Description: CSS class names for various layout sections.

• Optional: Yes

layoutOptions

• Type: WieldyLayoutOptions

• Description: Configuration options for the header, footer, sidebar, and right sidebar.

• Optional: Yes

children

• Type: React.ReactNode

• Description: Main content to render within the layout.

• Required: Yes

---

Types

WieldyLayoutClasses

Defines class names for various layout sections.

Property	Type	Description
root	string	CSS class for the root layout.
header	string	CSS class for the header.
footer	string	CSS class for the footer.
sidebar	string	CSS class for the sidebar.
content	string	CSS class for the content.
rightSidebar	string	CSS class for the right sidebar.

---

WieldyLayoutStyles

Defines inline styles for various layout sections.

Property	Type	Description
root	CSSProperties	Inline style for the root layout.
header	CSSProperties	Inline style for the header.
footer	CSSProperties	Inline style for the footer.
sidebar	CSSProperties	Inline style for the sidebar.
content	CSSProperties	Inline style for the content.
rightSidebar	CSSProperties	Inline style for the right sidebar.

---

WieldyLayoutOptions

Configuration options for layout sections.

Header Options

Property	Type	Description
fixed	boolean	Whether the header is fixed.
hidden	boolean	Whether the header is hidden.
spreadOut	boolean	Spreads out the header items.

Sidebar Options

Property	Type	Description
hidden	boolean	Whether the sidebar is hidden.
fixedPosition	{top, bottom}	Fixed positioning for the sidebar.
isDrawer	boolean	Whether the sidebar is a drawer.
fixed	boolean	Whether the sidebar is fixed.

Footer Options

Property	Type	Description
fixed	boolean	Whether the footer is fixed.
hidden	boolean	Whether the footer is hidden.
spreadOut	boolean	Spreads out the footer items.

---

Context

The WieldyLayoutContextType allows developers to dynamically update layout options during runtime.

Methods

• setHeaderOptions(options: WieldyLayoutHeaderOptions)

• setSidebarOptions(options: WieldyLayoutSidebarOptions)

• setRightSidebarOptions(options: WieldyLayoutSidebarOptions)

• setFooterOptions(options: WieldyLayoutFooterOptions)

---

Advanced Example

Dynamically updating layout options using context:

import React, { useContext } from "react";
import { WieldyLayout, WieldyLayoutContext } from "./WieldyLayout";

const DynamicLayout = () => {
  const { setHeaderOptions, setSidebarOptions } = useContext(WieldyLayoutContext);

  return (
    <WieldyLayout
      header={<div>Dynamic Header</div>}
      sidebar={<div>Dynamic Sidebar</div>}
    >
      <button
        onClick={() => setHeaderOptions({ fixed: false })}
      >
        Toggle Header Fixed
      </button>
      <button
        onClick={() => setSidebarOptions({ hidden: true })}
      >
        Hide Sidebar
      </button>
    </WieldyLayout>
  );
};

export default DynamicLayout;

---

Styling

The styles and classes props provide complete flexibility for styling:

const layoutConfig = {
  styles: {
    header: { backgroundColor: "blue" },
    sidebar: { width: 250 },
  },
  classes: {
    root: "custom-root-class",
    header: "custom-header-class",
  },
};

---

Best Practices

1. Use the context API for dynamic layout changes.

2. Combine styles and classes for optimal customization.

3. Modularize reusable components like headers, footers, and sidebars.

---

FAQs

1. Can I hide specific layout sections? Yes, use the hidden property in layoutOptions.

2. How do I style individual sections? Use the styles or classes props.

3. Does WieldyLayout support responsive design? Yes, you can leverage Ant Design’s grid system and media queries.

For further assistance, refer to the official documentation or contact support.