https://github.com/chideraike/react-highlight-popover

Popover for text that is selected/highlighted. Like in a Medium blog.
https://github.com/chideraike/react-highlight-popover

highlight medium popover react

Last synced: 3 months ago
JSON representation

Popover for text that is selected/highlighted. Like in a Medium blog.

• Host: GitHub
• URL: https://github.com/chideraike/react-highlight-popover
• Owner: chideraike
• License: mit
• Created: 2022-04-27T18:25:27.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-09T08:44:49.000Z (11 months ago)
• Last Synced: 2024-11-08T12:21:15.901Z (4 months ago)
• Topics: highlight, medium, popover, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-highlight-popover
• Size: 821 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-highlight-popover

> React component to show popover for a text that is selected/highlighted.

![npm](https://img.shields.io/npm/v/react-highlight-popover?logo=npm&style=flat-square)

![GitHub Actions](https://img.shields.io/github/actions/workflow/status/chideraike/react-highlight-popover/publish.yml?branch=main&style=flat-square)

![npm](https://img.shields.io/npm/dm/react-highlight-popover?style=flat-square)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)

A highly customizable text highlight react component with zero dependencies.

![Demo](https://user-images.githubusercontent.com/42821245/166227004-25300342-1da1-4552-a8cf-6f6a7154bff2.gif)

## Installation

```bash

npm install react-highlight-popover

```

or

```bash

yarn add react-highlight-popover

```

## Usage

1. Import `HighlightableTextArea` after installation

```js

import { HighlightableTextArea } from 'react-highlight-popover';

```

2. Wrap the text you want to be highlightable with `HighlightableTextArea`

```js

function App() {

    return (

        

            
This is a sample text that can be highlighted. Select some text from here to see.

        

    )

}

```


### Customize your popover item

You can define a custom popover item by defining the `popoverItem` prop, whose value is a function that returns a react node. It also takes `HighlightedText` & `setPopoverState` as optional arguments.

Example

```js

function App() {

    return (

         {

                return (

                    
 setPopoverState(false)}>

                        
{HighlightedText}

                    

                )}}

        >

            
This is a sample text that can be highlighted. Select some text from here to see.

        

    )

}

```


# API

## Props

Name|Default value|Description|Required

---|---|---|---

children||The part in which text that is selected/highlighted will render a popover.|Yes

popoverItem||The item to be rendered as popover when user has selected/highlighted text.|No

onHighlightText||The callback function that is fired when the popover shows, or hides.|No

xOffset|0|Positions the popover along the x-axis of the selected text.|No

yOffset|10|Positions the popover along the y-axis of the selected text.|No

zIndex|10|Sets the z-order of the popover and its descendants or flex items.|No

> Need new features? Create an issue [here](https://github.com/chideraike/react-highlight-popover/issues/new)

## Contribute

1. Fork the repo 

2. Create your feature branch (`git checkout -b my-awesome-feature`)

3. Make changes to the index file `src/index.tsx`

4. Write test for changes/features added in `tests/blah.test.tsx`

5. Commit your changes (`git add . && npm run commit`)

6. Push to the branch (`git push origin my-awesome-feature`)

7. Raise a Pull Request

## License

**react-highlight-popover** is licensed under [MIT](https://github.com/chideraike/react-highlight-popover/blob/main/LICENSE)