React component for "medium-like" text highlight
React component for "medium-like" text highlight
A configurable text highlight component with zero dependencies
npm install react-highlight-pop
react-highlight-pop
after installationimport HighlightPop from 'react-highlight-pop';
or
const HighlightPop = require('react-highlight-pop');
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>
)
}
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>
)
}
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 |
git checkout -b my-awesome-feature
)src/lib/index.js
__tests__/HighlightPop.test.js
git commit -am 'Awesome feature added'
)git push origin my-awesome-feature
)react-highlight-pop is licensed under MIT