Magic-panel NPM

Documentation for MagicPanel Library

Overview

MagicPanel is a React component library designed for creating dynamic and interactive panels. It supports both modal and drawer styles and provides a variety of customization options for enhanced user experience.

• Its usage is intuitive and highly customizable.

• With MagicPanel, you can easily switch between modal and drawer using just a boolean, without compromising the layout.

• The library is perfect for creating responsive and adaptable interfaces with ease.

• Ideal for scenarios where a modal is preferred on the desktop version, while a bottom-up sliding drawer is used on the mobile version.

Installation

Install the MagicPanel library via npm:

npm install magic-panel

import { magicPanelPlugin } from 'magic-panel/plugin';

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [magicPanelPlugin()] //  add this

//  Now you have access to the group: variant in Tailwind CSS.

<MagicPanel.Close className="close:bg-emerald-400" />

Styling

MagicPanel uses a combination of CSS classes for styling. Make sure to include the CSS file in your project:

import "magic-panel/style.css";

Usage

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

import React, { useState } from "react";
import "magic-panel/style.css"
import { MagicPanel } from "magic-panel";

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle Panel</button>
      <MagicPanel
        open={isOpen}
        onChange={setIsOpen}
        drawer={true}
        placement="right"
      >
        <MagicPanel.Header>Header Content</MagicPanel.Header>
        <MagicPanel.Content>
          <p>Your content goes here...</p>
        </MagicPanel.Content>
        <MagicPanel.Close onClose={() => setIsOpen(false)} />
      </MagicPanel>
    </div>
  );
};

export default App;

Components

MagicPanel

The main component for creating a panel. It supports both modal and drawer styles.

Props:

header: ReactNode - Content for the panel header.
content: ReactNode - Content for the panel body.
children: ReactNode - Children components inside the panel.
open: boolean - Whether the panel is open or closed.
onChange: (isOpen: boolean) => void - Callback function triggered when the panel state changes.
destroyOnClose: boolean - Whether to destroy the panel content when closed.
width: number - Width of the panel.
height: number | string - Height of the panel.
className: string - Additional class names for customization.
drawer: boolean - Whether the panel should be a drawer.
placement: "top" | "bottom" | "left" | "right" - Position of the drawer.

Example:

<MagicPanel open={true} drawer={true} placement="right">
  <MagicPanel.Header>Header Content</MagicPanel.Header>
  <MagicPanel.ContentScroll>
    <p>Your content goes here...</p>
  </MagicPanel.ContentScroll>
  <MagicPanel.Close onClose={() => setIsOpen(false)} />
</MagicPanel>

ContentScroll

A component to enable scrolling within the panel content.

Props:

children: ReactNode - Children components inside the content scroll area.
className: string - Additional class names for customization.

Example:

<ContentScroll>
  <p>Your scrollable content goes here...</p>
</ContentScroll>

Advanced Usage

Drawer Positioning

MagicPanel supports various drawer positions. Set the placement prop to define the position:

"top"
"bottom"
"left"
"right"

Example:

<MagicPanel open={true} drawer={true} placement="left">
  <MagicPanel.Header>Header Content</MagicPanel.Header>
  <MagicPanel.Content>
    <p>Your content goes here...</p>
  </MagicPanel.Content>
  <MagicPanel.Close>Close</MagicPanel.Close>
</MagicPanel>