React Text Selection

Render prop callback function to provide text selection for text inputs, textarea's, etc. Includes UMD build

Install

npm i -s @jonstuebe/react-text-selection

Usage

import React from "react";
import TextSelection from "@jonstuebe/react-text-selection";

const App = () => (
  <div>
    <TextSelection>
      {({ eventProps, selectionStart, selectionEnd }) => (
        <div>
          <p>
            {selectionStart}/{selectionEnd}
          </p>
          <textarea className="form-control" {...eventProps} />
        </div>
      )}
    </TextSelection>
  </div>
);

Codepen Example

https://codepen.io/jonstuebe/pen/zpBwrL?editors=0010

| IE / Edge | Firefox | Chrome | Safari | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | IE10, IE11, Edge | last 4 versions | last 4 versions | last 4 versions |