Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loaderb0t/textarea-selection-bounds
A handy package to get the bounds of the current text selection in a textarea element
https://github.com/loaderb0t/textarea-selection-bounds
Last synced: 13 days ago
JSON representation
A handy package to get the bounds of the current text selection in a textarea element
- Host: GitHub
- URL: https://github.com/loaderb0t/textarea-selection-bounds
- Owner: LoaderB0T
- License: mit
- Created: 2024-03-27T14:31:37.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-12T09:44:34.000Z (9 months ago)
- Last Synced: 2024-04-12T15:43:42.767Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 162 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/textarea-selection-bounds)
[](https://codepen.io/Janik-Schumacher/pen/gOyGxed)
[](https://github.com/LoaderB0T/textarea-selection-bounds/actions/workflows/build.yml)
[](https://sonarcloud.io/summary/new_code?id=LoaderB0T_textarea-selection-bounds)
[](https://bundlephobia.com/package/textarea-selection-bounds)
# textarea-selection-bounds
Easily get the bounds of a selection in a textarea or text input element.
## Motivation 💥
**textarea-selection-bounds** is a simple library that allows you to get the bounds of a selection in a textarea or text input element. It is written in TypeScript and has no dependencies. It is perfect to overlay content on top of a textarea or text input element that should follow the selection.
`top` & `left` are the coordinates of the top-left corner of the selection. They are relative to the window (fixed). `width` & `height` are the dimensions of the selection.
⚠️ Caution ⚠️: If you want to style an element that follows the selection, make sure to set the `position` of the element to `fixed` and use the `top` and `left` values from the bounds object.
## Demo 🚀
See the [Codepen](https://codepen.io/Janik-Schumacher/pen/gOyGxed) for a live demo.
## Features 🔥
✅ Get top, left, width, and height of a selection in a textarea or text input element.
✅ Zero dependencies.
✅ Strongly typed.
## Built With 🔧
- [TypeScript](https://www.typescriptlang.org/)
## Installation 📦
```console
pnpm i textarea-selection-bounds
// or
yarn add textarea-selection-bounds
// or
npm i textarea-selection-bounds
```
## Usage Example 🚀
```typescript
import { TextareaSelectionBounds } from "./textarea-selection-bounds";
```
```typescript
const textArea = document.querySelector('textarea');
if (textArea) {
const bounds = new TextareaSelectionBounds(textArea);
console.log(bounds.getBounds());
}
```
## Contributing 🧑🏻💻
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License 🔑
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Contact 📧
Janik Schumacher - [@LoaderB0T](https://twitter.com/LoaderB0T) - [linkedin](https://www.linkedin.com/in/janikschumacher/)
Project Link: [https://github.com/LoaderB0T/textarea-selection-bounds](https://github.com/LoaderB0T/textarea-selection-bounds)