react-highlight-pop

    1.0.2 • Public • Published

    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

    MIT

    Install

    npm i react-highlight-pop

    DownloadsWeekly Downloads

    481

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    36.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • codeshifu