Lens Select

A fisheye/lens magnification select component for React built with Mantine. Displays items with a macOS Dock-like magnification effect on hover, supporting count mode, min/max/step range, and compound components.

Installation

yarn add @gfazioli/mantine-lens-select

Overview

LensSelect provides a fisheye/lens magnification selection interface:

• Count Mode — use count={15} for instant pill generation, no data array needed
• Range Support — combine min, max, step, precision for numeric ranges (Slider-like API)
• Custom Data — pass data with custom view for icons, emojis, or any React node
• Magnification Effect — configurable magnification, lensRange, scale, opacity, and blur
• Expand on Hover — macOS Dock-style push effect with expandOnHover
• Horizontal & Vertical — switch orientation with a single prop
• Selection Modes — click, hover, or withWheel for mouse wheel navigation
• Keyboard Navigation — Arrow keys, Home/End with optional loop
• Compound Components — LensSelect.Indicator for selection indicator customization
• Variants — default and outline for both pills and indicator
• Pill Customization — pillWidth, pillHeight, pillRadius, pillColor, hoverColor, activeColor
• Custom Rendering — renderItem callback for complete item control
• Responsive — CSS-native responsive via StyleProp on itemSize, gap, pillWidth, pillHeight
• Accessibility — WAI-ARIA listbox pattern with proper roles and labels
• Styles API — 6 selectors, 13 CSS variables for full styling control