Skip to content

luqmanoop/react-highlight-pop

Repository files navigation

react-highlight-pop

React component for "medium-like" text highlight

semantic-release

A configurable text highlight component with zero dependencies

demo

Installation

npm install react-highlight-pop

Usage

  1. Import/require react-highlight-pop after installation
import HighlightPop from 'react-highlight-pop';

or

const HighlightPop = require('react-highlight-pop');
  1. Wrap the text you want to be highlightable with react-highlight-pop
const App = () => {
    return (
        <HighlightPop>
            <p>You can highlight me</p>
            <p>I will show a popover when you highlight me</p>
        </HighlightPop>
    )
}

Custom popover items

You can define custom popover items by defining the popoverItems prop, whose value is a function that returns jsx.

NOTE: You should always pass your custom popover items.

Example

const App = () => {
    return (
        <HighlightPop 
            popoverItems={itemClass => (
             <Fragment>
                <span 
                    className={itemClass} onClick={() => alert('sharing')}>
                    share
                </span>
             </Fragment>
            )}>
            <p>You can highlight me</p>
            <p>I will show a popover when you highlight me</p>
        </HighlightPop>
    )
}

API

Props

prop value description
popoverItems function A function that returns jsx. Returned jsx display as popover items when a text is highlighted.
onHighlightPop function Callback function that's invoked whenever a text is highlighted.
children node The text/group of text that's highlightable

Contributing

  1. Fork the repo
  2. Create your feature branch (git checkout -b my-awesome-feature)
  3. Make changes to the lib file src/lib/index.js
  4. Write test for changes/features added in __tests__/HighlightPop.test.js
  5. Commit your changes (git commit -am 'Awesome feature added')
  6. Push to the branch (git push origin my-awesome-feature)
  7. Raise a Pull Request

License

react-highlight-pop is licensed under MIT