🚀 Bottom Panel React Component

A fully customizable React bottom panel component that allows you to create dynamic and interactive panels for your web applications.

Check out the Example to see it in action.

Getting Started 😁

Installation

Install the package locally using npm:

npm install bottom-panel-react

• Usage

import BottomPanel from "bottom-panel-react";

const YourComponent = () => {
  return (
    <div className={style.container}>
      <BottomPanel
        panelState={"bottom"} // Set Initial State of Panel from ["top", "bottom", "middle"]
        getPanelState={(value) => { }} // Get the Current State of Panel
      >
        {/* 
          Your Components that you want to render inside Bottom Panel
         */}
      </BottomPanel>
    </div>
  );
};

export default YourComponent;

Customizing Bottom Panel Component 💥

You can customize the Bottom Panel component by passing various props:

BottomPanel Props

| Prop Name | Default Value | Type | Description | |------------------- |----------------------- |----------------------- |-----------------------------------------------| | panelClass | "" (empty string) | string | CSS class for custom styling of the panel's body. | | panelBodyCSS | {} (empty object) | object | Custom CSS styles for the panel body. | | panelDragIcon | null | element | Icon element for dragging the panel. | | topHeight | null | number | Height of the panel when in the "top" state. | | bottomHeight | null | number | Height of the panel when in the "bottom" state. | | middleHeight | null | number | Height of the panel when in the "middle" state. | | isVisible | true | bool | Controls the visibility of the panel. | | isKeysFunctional | true | bool | Enables key functionality for the panel(Use of Arrow Keys Up and Down). | | isNavigationButtons | true | bool | Enables navigation buttons for the panel. | | isMiddleFunctional | true | bool | Enables functionality for the "middle" state. | | throttleTime | 5 | number | Throttle time for certain panel actions(Delay between the consecutive renders, Effects smoothness of the panel). | | panelState | "bottom" | string (enum: "bottom", "top", "middle") | The current state of the panel. | | getPanelState | () => {} | func | A function to get the current panel state. |

Code example of BottomPanel Component: Example

Issues & Bugs 😵‍💫

• Having trouble using component? Raise an issue here
• Need Help using the component? Feel free to drop an email.