Documentation

Getting Started

Hooks Overview

useFetch( )useCopyToClipboard( )useNetwork( )useFullScreen( )useGeolocation( )useSelectedText( )useStateCallback( )useResize( )useSearch( )useImageDownload( )

useSelectedText( )

This is a react hook which print's the selected text from a browser/user's agent. The hook does the selection for you out of the box. It however also provides an extra method of getSelectedText which can be used on other call's like button clicks e.t.c

Usage

1import { useSelectedText } from 'react-modern-hooks'
2
3const Demo = () => {
4  const { error, selectedText, getSelectedText } = useSelectedText()
5
6  if (error) {
7    console.log('Error: ', error)
8  }
9
10  return (
11    <div>
12      <p>Highlight the text you need to ge selected</p>
13
14      <p>You highlighted the text: {selectedText}</p>
15
16      <div onMouseUp={() => getSelectedText()}>
17        Only get selected from inside this div
18      </div>
19    </div>
20  )
21}
22
23export default Demo

References

Input Variables

No input variables

Output Variables

error - Error message during text selection

selectedText - The selected text

getSelectedText - An optional callback function (the hook has already taken care of this) which can be used to selected the text.