use-text-selections

0.0.1 โ€ข Public โ€ข Published

use-text-selections

A React hook that provides enhanced text selection functionality with automatic word boundary detection.

Installation

# Install using npm
npm install use-text-selections

# Or using yarn
yarn add use-text-selections

Features

  • ๐Ÿ“ Automatic word boundary detection
  • ๐ŸŽฏ Tracks text selection across elements
  • ๐Ÿงน Automatic cleanup on component unmount
  • ๐Ÿ”„ Selection state management
  • ๐Ÿ“‹ Easy access to selected text
  • ๐Ÿ–ฑ๏ธ Outside click detection

Usage

import React from "react";
// Import useTextSelection as a named export
import { useTextSelection } from "use-text-selections";

function MyComponent() {
  // Initialize the hook to get selection data and clear function
  const { selectionData, clearTextSelection } = useTextSelection();

  return (
    <div>
      <p>
        Try selecting some text in this paragraph. The hook will automatically
        expand the selection to include complete words.
      </p>

      {/* Render UI only when text is selected */}
      {selectionData && (
        <div>
          <p>Selected text: {selectionData}</p>
          <button onClick={clearTextSelection}>Clear Selection</button>
        </div>
      )}
    </div>
  );
}

API

Returns

The hook returns an object with the following properties:

Property Type Description
selectionData string The currently selected text. Empty string if no text is selected.
clearTextSelection function A function to clear the current text selection.

Behavior

  • The hook automatically expands the selection to include complete words
  • Clicking outside the selected area automatically clears the selection
  • Selection state is maintained until explicitly cleared or a new selection is made
  • All event listeners are automatically cleaned up when the component unmounts

Complete Example

import React from "react";
// Import the hook
import { useTextSelection } from "use-text-selections";

function TextSelector() {
  // Initialize the hook
  const { selectionData, clearTextSelection } = useTextSelection();

  return (
    <div className="text-selector">
      <div className="content">
        <h2>Select some text below:</h2>
        {/* Example text content to demonstrate selection */}
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <p>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>

      {/* Selection info panel */}
      {selectionData && (
        <div className="selection-info">
          <h3>Selected Text:</h3>
          <p>{selectionData}</p>
          <button onClick={clearTextSelection}>Clear Selection</button>
        </div>
      )}
    </div>
  );
}

Browser Support

  • Works in all modern browsers that support the Selection API
  • Not compatible with React Native (requires DOM environment)

Requirements

  • React 16.8.0 or higher (hooks support)
  • DOM environment

License

MIT ยฉ Jay Kalia

Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page.

Author

Jay Kalia

Support

If you found this project helpful, please consider giving it a โญ๏ธ on GitHub!

Package Sidebar

Install

npm i use-text-selections

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

9.46 kB

Total Files

4

Last publish

Collaborators

  • jaykalia007