|
| 1 | +# @omsimos/react-highlight-popover |
| 2 | + |
| 3 | +## 1.0.0 |
| 4 | + |
| 5 | +### Major Changes |
| 6 | + |
| 7 | +- 2f48f7d: # React Highlight Popover v1.0.0 |
| 8 | + |
| 9 | + We're excited to announce the initial release of React Highlight Popover, a customizable, headless React component for creating popovers on text selection, with zero dependencies! |
| 10 | + |
| 11 | + ## 🎉 Highlights |
| 12 | + |
| 13 | + - **Headless Component**: Maximum flexibility for styling and integration |
| 14 | + - **Zero Dependencies**: Only React as a peer dependency |
| 15 | + - **Customizable**: Fine-tune behavior with props and callbacks |
| 16 | + - **Lightweight**: Minimal impact on your bundle size |
| 17 | + - **TypeScript Support**: Full type definitions included |
| 18 | + |
| 19 | + ## 🚀 Features |
| 20 | + |
| 21 | + - Easy-to-use React component |
| 22 | + - Fully customizable popover content and styling |
| 23 | + - Configurable minimum selection length |
| 24 | + - Automatic positioning based on text selection |
| 25 | + - Customizable offset for fine-tuning popover position |
| 26 | + - Event callbacks for selection and popover lifecycle |
| 27 | + - Extensible architecture for advanced use cases |
| 28 | + |
| 29 | + ## 📦 Installation |
| 30 | + |
| 31 | + ```sh |
| 32 | + npm install @omsimos/react-highlight-popover |
| 33 | + ``` |
| 34 | + |
| 35 | + or |
| 36 | + |
| 37 | + ```sh |
| 38 | + yarn add @omsimos/react-highlight-popover |
| 39 | + ``` |
| 40 | + |
| 41 | + ## 🔧 Usage |
| 42 | + |
| 43 | + ```jsx |
| 44 | + import React from "react"; |
| 45 | + import { HighlightPopover } from "@omsimos/react-highlight-popover"; |
| 46 | + |
| 47 | + function App() { |
| 48 | + const renderPopover = ({ selection }) => ( |
| 49 | + <div className="bg-white border rounded p-2 shadow-lg select-none"> |
| 50 | + You selected: {selection} |
| 51 | + </div> |
| 52 | + ); |
| 53 | + |
| 54 | + return ( |
| 55 | + <HighlightPopover renderPopover={renderPopover}> |
| 56 | + <p>Select some text to see the popover in action!</p> |
| 57 | + </HighlightPopover> |
| 58 | + ); |
| 59 | + } |
| 60 | + ``` |
| 61 | + |
| 62 | + ## 📝 Changelog |
| 63 | + |
| 64 | + ### v1.0.0 |
| 65 | + |
| 66 | + - Initial release of React Highlight Popover |
| 67 | + - Implemented core HighlightPopover component |
| 68 | + - Added useHighlightPopover hook for accessing internal state |
| 69 | + - Included props for customization: |
| 70 | + - renderPopover |
| 71 | + - className |
| 72 | + - offset |
| 73 | + - minSelectionLength |
| 74 | + - Added event callbacks: |
| 75 | + - onSelectionStart |
| 76 | + - onSelectionEnd |
| 77 | + - onPopoverShow |
| 78 | + - onPopoverHide |
| 79 | + - Implemented automatic positioning of popover |
| 80 | + - Added TypeScript definitions |
| 81 | + - Created comprehensive documentation and examples |
| 82 | + |
| 83 | + ## 📚 Documentation |
| 84 | + |
| 85 | + For full documentation, usage examples, and API references, please visit our [GitHub repository](https://github.com/omsimos/react-highlight-popover) |
0 commit comments