react-selectall

react-selectall
===============

![Dependencies]()
![Dev Dependencies]()

ReactJS component for selecting text easily.

Demo
----

A demo is located inside src/demo directory, here you can test your library while developing.

Tu run the demo locally, clone the repository and type:

``
npm install
npm run
`

Then open localhost:8000 in a browser.

Installation
------------

Install from npm:

`
npm install react-selectall --save
`

Usage
-----

The simplest use is to wrap your subcomponents or subelements inside a SelectAll container:

`jsx
import SelectAll from 'react-selectall';





qux tux

`

When you will double-click on the rendered container, all of the text inside will be selected.

$3

By default the select-all activation event is a double-click.

You can change it to a single click customizing the selectOn:

`jsx
import SelectAll from 'react-selectall';





qux tux

`

$3

The most common usage of a selected text is to copy it.

You can save the user from doing the copy operation itself by activating the toClipboard prop:

`jsx
import SelectAll from 'react-selectall';





qux tux

`

Please note: copy to clipboard can not be supported by every browser.

Plus: some versions of Internet Explorer ask explicitly a confirmation to the user.

$3

Still you can be interested in doing other operations with the selected text.

You can then pass an event handler function to the onSelect: prop

``jsx
import SelectAll from 'react-selectall';





qux tux

`

The handleSelect receive following parameters:

* ev - the event who triggered the action
* text - the selected text
* toClipboard - a boolean value, true if the selection has been successfully copied to clipboard.

$3

By default a SelectAll component wrap what it contains in a single selection block.

But You can move the selection behavior to childrens:

`jsx
import SelectAll from 'react-selectall';





qux tux

`

In that case the selection take place when acting on DOM nodes contained inside the SelectAll component.

Please note: this will also affects other properties like onSelect, selectOn, toClipboard`.