- Ellipsis text component and hook (ex. tooltip) that provide various functions in react
use-ellipsis is a React component and hook designed to provide a flexible and customizable solution for handling long text within your applications. Whether you need to truncate text, display tooltips, or simply enhance readability, use-ellipsis offers a comprehensive set of features to meet your needs.
- Text Truncation🎶: Automatically truncates text to a specified length and appends an ellipsis (...) for a clean and concise display.
- Tooltip Functionality🎶: Provides a tooltip that reveals the full text when the truncated portion is hovered over.
- Customization🎶: Offers a wide range of options to tailor the component's appearance and behavior, including:
- Text color, size, and font
- Ellipsis character
- Tooltip position and style
- Responsive behavior
- Performance🎶: Optimized for performance to ensure smooth rendering even with large amounts of text.
- Accessibility🎶: Adheres to accessibility best practices to make your application more inclusive.
install commandsjs / ts example-
Simplify text handling ✨: Easily truncate and display long text without writing custom logic. Enhance user experience: Improve readability and provide additional context with tooltips. Customize to your needs: Tailor the component to match your specific design requirements. Improve accessibility: Ensure your application is accessible to users with disabilities. Roadmap
-
Internationalization ✨: Support for different languages and locales. Advanced features: Explore additional features like line-based truncation and custom rendering. Performance optimizations: Continuously improve rendering performance. Contributing
We welcome contributions! Please refer to our GitHub repository for guidelines.
MIT