react-highlight-popover

React component to show popover for a text that is selected/highlighted.

A highly customizable text highlight react component with zero dependencies.

Installation

npm install react-highlight-popover

or

yarn add react-highlight-popover

Usage

1. Import HighlightableTextArea after installation

import { HighlightableTextArea } from 'react-highlight-popover';

2. Wrap the text you want to be highlightable with HighlightableTextArea

function App() {
    return (
        <HighlightableTextArea>
            <p>This is a sample text that can be highlighted. Select some text from here to see.</p>
        </HighlightableTextArea>
    )
}

Customize your popover item

You can define a custom popover item by defining the popoverItem prop, whose value is a function that returns a react node. It also takes HighlightedText & setPopoverState as optional arguments.

Example

function App() {
    return (
        <HighlightableTextArea 
            popoverItem={(HighlightedText, setPopoverState) => {
                return (
                    <div onClick={() => setPopoverState(false)}>
                        <p>{HighlightedText}</p>
                    </div>
                )}}
        >
            <p>This is a sample text that can be highlighted. Select some text from here to see.</p>
        </HighlightableTextArea>
    )
}

API

Props

Name	Default value	Description	Required
children		The part in which text that is selected/highlighted will render a popover.	Yes
popoverItem		The item to be rendered as popover when user has selected/highlighted text.	No
onHighlightText		The callback function that is fired when the popover shows, or hides.	No
xOffset	0	Positions the popover along the x-axis of the selected text.	No
yOffset	10	Positions the popover along the y-axis of the selected text.	No
zIndex	10	Sets the z-order of the popover and its descendants or flex items.	No

Need new features? Create an issue here

Contribute

1. Fork the repo
2. Create your feature branch (git checkout -b my-awesome-feature)
3. Make changes to the index file src/index.tsx
4. Write test for changes/features added in tests/blah.test.tsx
5. Commit your changes (git add . && npm run commit)
6. Push to the branch (git push origin my-awesome-feature)
7. Raise a Pull Request

License

react-highlight-popover is licensed under MIT