Range Kit React

GitHub | 中文

React bindings for range-kit, providing hooks and components to easily integrate robust range selection and highlighting into React applications.

Demo

Features

• React Hooks:
  • useSelectionRestore: Manage selection persistence and restoration.
  • useSearchHighlight: Implement search functionality with highlighting.
  • useSelectionCallbacks: Handle selection events.
• Components:
  • SelectionPopover: Ready-to-use popover component for selection actions.

Installation

npm install range-kit-react range-kit
# or
pnpm add range-kit-react range-kit
# or
yarn add range-kit-react range-kit

Usage

Basic Example

import { useRef } from 'react';
import { useSearchHighlight, SelectionPopover } from 'range-kit-react';
import 'range-kit-react/styles';

function App() {
  const containerRef = useRef(null);
  
  // Initialize Search Highlight
  const {
    searchKeywords,
    searchResults,
    addSearchKeyword,
    clearSearchHighlights
  } = useSearchHighlight({
    getInstance: () => null, // Provide your SelectionManager instance if needed
    containers: ['#content-area'],
    selectionStyles: {
      default: { backgroundColor: 'yellow' }
    }
  });

  return (
    <div>
      <div id="content-area">
        <p>Select some text here to see range-kit in action.</p>
      </div>
      
      {/* Popover component integration */}
      <SelectionPopover 
        // ... props configuration
      />
    </div>
  );
}

License

Apache-2.0