Turtle Panes 🐢

Turtle Panes is a pane management library designed for Vue and React, enabling flexible and efficient management of UI panes. It provides a simple and scalable API to create, organize, and control panes in your application.

Demos here: TurtlePane demos

---

🤏🏻 Size

Package	Bundle Size
Core
Vue
React

---

🚀 Features

• 🖼️ Flexible Pane Management: Easily create and control panes in your UI.
• 🔌 Works with Vue & React: Designed specifically for these two frameworks.
• ⚡ Lightweight & Fast: Minimal overhead with a smooth user experience.
• 🚀 Overflow Prevention: Keep important content visible by preventing overflows.
• 📐 Flexible Layouts: Spread your panes flexibly or set precise widths.
• 👁️ Hide/Show Panes: Minimize or hide panes when they exceed a certain width limit.
• 🎨 Custom Resizers: Replace the default divider with your own.
• 🏗 Vue Integration: Uses a composable approach, works well with the Vue ecosystem.
• 📱 Responsive Design: Automatically adjusts to browser resizing for a seamless user experience.
• 🎛 Fine-Grained Control: Exposes functions to give developers precise control over pane behavior and interactions.
• 🛠 Zero Dependencies: No external dependencies for a leaner and more maintainable codebase.

---

📦 Installation

Turtle Panes provides separate packages for Vue and React. Install the package for your preferred framework:

Vue:

npm install @turtlepanes/vue

React:

npm install @turtlepanes/react

---

🛠 Getting Started

Vue Example

<script setup>
import { TurtlePanes, TurtlePane } from "@turtle-panes/vue";
</script>
<template>
  <TurtlePanes>
    <TurtlePane> Hello World from Pane 1 </TurtlePane>
    <TurtlePane> Hello World from Pane 2 </TurtlePane>
  </TurtlePanes>
</template>

🔗 More details in the Vue documentation.

React Example

import TurtlePanes from '@turtle-panes/react';

const MyComponent = () => {
  return (
    <TurtlePanes>
      <TurtlePanes.Pane>
        Hello World from Pane 1
      </TurtlePanes.Pane>
      <TurtlePanes.Pane>
        Hello World from Pane 2
      </TurtlePanes.Pane>
    </TurtlePanes>
  );
};

export default MyComponent;

🔗 More details in the React documentation.

---

📖 API Reference

Refer to the full API documentation:

• Vue Docs
• React Docs

---

🤝 Contributing

Contributions are welcome! Please check out our contribution guidelines before making a pull request.

---

📜 License

Turtle Panes is licensed under the GPL-3.0 license.

---

🎯 Ready to simplify pane management? Get started with Turtle Panes today!

---