rhp

react-highlight-pop

React component for "medium-like" text highlight

Showing:

Popularity

Downloads/wk

953

GitHub Stars

33

Maintenance

Last Commit

2yrs ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

1.8KB

License

ISC

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

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

propvaluedescription
popoverItemsfunctionA function that returns jsx. Returned jsx display as popover items when a text is highlighted.
onHighlightPopfunctionCallback function that's invoked whenever a text is highlighted.
childrennodeThe 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100