tessl/npm-react-collapsible

React component to wrap content in Collapsible element with trigger to open and close.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Animation and Transitions

Name: tessl/npm-react-collapsible
Author: tessl

Control the timing, easing, and visual behavior of expand/collapse animations for smooth, customizable user experiences.

Capabilities

Transition Timing Configuration

Fine-tune the duration and timing of opening and closing animations.

/**
 * Duration in milliseconds for the opening transition
 * Controls how long it takes to expand the content
 * @default 400
 */
transitionTime?: number;

/**
 * Duration in milliseconds for the closing transition
 * If null, uses transitionTime for both directions
 * @default null
 */
transitionCloseTime?: number | null;

Usage Examples:

// Fast animations
<Collapsible
  trigger="Quick toggle"
  transitionTime={200}
  transitionCloseTime={150}
>
  <p>Content with fast animations</p>
</Collapsible>

// Slow, dramatic animations
<Collapsible
  trigger="Slow reveal"
  transitionTime={1000}
  transitionCloseTime={800}
>
  <div>Content with slow, dramatic reveal</div>
</Collapsible>

// Asymmetric timing (fast open, slow close)
<Collapsible
  trigger="Asymmetric timing"
  transitionTime={300}
  transitionCloseTime={600}
>
  <p>Opens quickly, closes slowly</p>
</Collapsible>

Easing and Animation Curves

Control the acceleration and deceleration of transitions using CSS timing functions.

/**
 * CSS transition timing function for animations
 * Accepts any valid CSS easing value
 * @default "linear"
 */
easing?: string;

Common Easing Values:

"linear" - Constant speed throughout
"ease" - Slow start, fast middle, slow end
"ease-in" - Slow start, accelerating
"ease-out" - Fast start, decelerating
"ease-in-out" - Slow start and end, fast middle
"cubic-bezier(0.4, 0, 0.2, 1)" - Custom cubic bezier curve

Usage Examples:

// Smooth, natural easing
<Collapsible
  trigger="Smooth animation"
  transitionTime={400}
  easing="ease-out"
>
  <p>Content with smooth easing</p>
</Collapsible>

// Bouncy animation with custom cubic-bezier
<Collapsible
  trigger="Bouncy reveal"
  transitionTime={600}
  easing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"
>
  <div>Content with bouncy animation</div>
</Collapsible>

// Sharp, snappy transitions
<Collapsible
  trigger="Snappy toggle"
  transitionTime={250}
  easing="ease-in-out"
>
  <p>Quick, sharp transitions</p>
</Collapsible>

Overflow Behavior Control

Configure how content overflow is handled during and after transitions.

/**
 * CSS overflow value applied to content when fully opened
 * Controls scrolling and content visibility behavior
 * @default "hidden"
 */
overflowWhenOpen?: 
  | "hidden"    // Hide any overflow (default)
  | "visible"   // Show all content, may overlap other elements
  | "auto"      // Show scrollbars if needed
  | "scroll"    // Always show scrollbars
  | "inherit"   // Inherit from parent element
  | "initial"   // Use initial CSS value
  | "unset";    // Remove the property

Usage Examples:

// Scrollable content when open
<Collapsible
  trigger="Scrollable content"
  overflowWhenOpen="auto"
>
  <div style={{ height: '400px', maxHeight: '200px' }}>
    <p>This content is taller than the max height</p>
    <p>Scrollbars will appear when expanded</p>
    <p>More content...</p>
  </div>
</Collapsible>

// Allow content to flow beyond container
<Collapsible
  trigger="Overflowing content"
  overflowWhenOpen="visible"
>
  <div style={{ width: '200%' }}>
    <p>This content extends beyond the container boundaries</p>
  </div>
</Collapsible>

// Always show scrollbars for consistent layout
<Collapsible
  trigger="Always scrollable"
  overflowWhenOpen="scroll"
>
  <div>
    <p>Scrollbars always visible for consistent spacing</p>
  </div>
</Collapsible>

Animation State Management

The component internally manages complex animation states to ensure smooth transitions:

Internal Animation States

The component tracks several internal states during animations:

isClosed: Whether the component is visually closed
inTransition: Whether an animation is currently running
shouldOpenOnNextCycle: Flag for deferred opening operations
shouldSwitchAutoOnNextCycle: Flag for height auto-switching
height: Current height value (0, specific pixel value, or "auto")
transition: Current CSS transition property value

Animation Lifecycle

Opening Animation:
- State changes to inTransition: true
- Height animates from 0 to content's scrollHeight
- Once complete, height switches to "auto" for responsive behavior
- inTransition becomes false
Closing Animation:
- Height switches from "auto" to specific pixel value
- Animates to height: 0
- Component marked as isClosed: true
- inTransition becomes false

Performance Considerations

// For better performance with expensive content
<Collapsible
  trigger="Performance optimized"
  lazyRender={true}              // Don't render until first open
  transitionTime={300}           // Shorter animations
  easing="ease-out"             // Smooth but not complex
  overflowWhenOpen="hidden"     // Simpler overflow handling
>
  <ExpensiveComponent />
</Collapsible>

// For complex, dynamic content
<Collapsible
  trigger="Dynamic content"
  transitionTime={400}
  overflowWhenOpen="auto"       // Allow scrolling if content changes size
  contentHiddenWhenClosed={true} // Better accessibility
>
  <DynamicContent />
</Collapsible>

Install with Tessl CLI