❤
npm
Sign UpSign In

react-snappy-selection

2.0.2 • Public • Published

react-snappy-selection

Make text selection snap when selected by clicking multiple times. Inspired by github's snappy branch name selection.

Installation

yarn add react-snappy-selection

npm install react-snappy-selection

Usage

With text as children:

import SnappySelection from 'react-snappy-selection';
const App = () => (
  <div>
    <span>This is not snappy</span>
    <SnappySelection>This is snappy</SnappySelection>
  </div>
);

With custom tag or component:

import SnappySelection from 'react-snappy-selection';
const App = () => (
  <div>
    <span>This is not snappy</span>
    <SnappySelection>
      <div style={{ color: 'yellow' }}>This is snappy</div>
    </SnappySelection>
  </div>
);
import SnappySelection from 'react-snappy-selection';
const App = () => (
  <div>
    <span>This is not snappy</span>
    <SnappySelection>
      <MyCustomComponent>This is snappy</MyCustomComponent>
    </SnappySelection>
  </div>
);

SnappySelection expects a single children. If you pass a custom component, you must make sure to pass prop onClick to the underlying dom-element.

Examples

https://codesandbox.io/s/823qkkj580

Readme

Keywords

none

Package Sidebar

Install

npm i react-snappy-selection

Repository

github.com/robin-drexler/react-snappy-selection

Homepage

github.com/robin-drexler/react-snappy-selection#readme

Weekly Downloads

1

Version

2.0.2

License

MIT

Unpacked Size

7.25 MB

Total Files

11

Last publish

Collaborators

  • robin-drexler
Try on RunKit
Report malware