react-highlight-pop

React component for "medium-like" text highlight

A configurable text highlight component with zero dependencies

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');

2. 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

MIT