✨ ELA LABS ✨

A collection of smart, reusable components focused on real-world performance and UX.

Installation • Usage • How it Works • Examples • Documentation • Contributing • License

---

🧪 About

ELA LABS is an open source initiative to create lightweight and intelligent UI components.

We aim to bridge real-world DOM behavior with developer ergonomics — making things that just work across devices and layouts.

🚧 Work in Progress

This is just the beginning. More components are coming soon!

💡 Components

🦴 SmartSkeleton

The SmartSkeleton is a smart skeleton loading component that adapts to the real DOM structure and styles.

It’s designed to balance performance, reusability, and compatibility, using:

• getComputedStyle for style extraction
• getBoundingClientRect for size measurement
• A style cache (via WeakMap) for performance
• Dynamic event listeners (resize, scroll, mutation) when in responsive mode
• Simple shimmer via skeleton-shimmer class

---

🥡 SmartText

The SmartText is a smart text component that adapts to the real DOM structure and content overflow.

It’s designed to balance performance, reusability, and compatibility, using:

• It’s designed to balance performance, reusability, and compatibility, using:

• ResizeObserver for detecting content size changes

• scrollHeight vs clientHeight to detect overflow

• Efficient line clamping with -webkit-line-clamp

• Expandable behavior via expandable, readMoreLabel, and readLessLabel props

• Conditional rendering of the expand/collapse button

• Customizable button placement (outside-top, outside-bottom)

• Full control with custom expandableButton (supports render prop pattern)

• Clean and customizable with className and childrenClassName props

---

📚 Documentation

📘 Check out the full docs at: https://ela-labs-react.vercel.app

---

📦 Installation

Each component in the ELA LABS collection is published independently, allowing you to install only what you need.

To install a specific component, refer to its individual installation guide in the documentation.

📘 Full docs available at: https://ela-labs-react.vercel.app

For example, to install SmartSkeleton:

pnpm install @ela-labs/smart-skeleton

npm install @ela-labs/smart-skeleton
# or
yarn add @ela-labs/smart-skeleton