Breaking News: Grepper is joining You.com. Read the official announcement!

react customHook

Quaint Quelea answered on November 18, 2022 Popularity 7/10 Helpfulness 3/10

answer react customHook

related react customHook example

react customHook

Comment

import { useState, useEffect, useCallback } from 'react ' ;

export const useTextSelection () => {
	const [, update] useState();
	const forceUpdate = useCallback(() => update ({}), []);
	const (selection, setSelection] useState (null);
	
  	const handleselection = () => {
    	setSelection (document.getSelection ()) ;
    	forceUpdate();
    }
    
    useEffect (() => {
      setSelection(document.getSelection());
      document.addEventListener('selectionchange', handleSelection);
      return () => {
      	document.removeEventListener('selectionchange', handleSelection);
     }, []}
	return String(selection);
}


import { useTextSelection } from './hooks/useTextselection';
const App () => {
	const selection = useTextSelection () ;
	return (
      <div className = "App">
        <h1>Hello !</h1>
        <h2>Select this text to see some magic!</h2>
        <h3>{selection} </h3>
      </div>
);
export default App;

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Nov 18 2022

Quaint Quelea

0 Answers Avg Quality 2/10

Closely Related Answers

react customHook example

Comment

const useToggle({ onOpen, onClose }) => {
  const [isOpen, setIsOpen] = useState(false)

  const handleToggle = () => {
    const nextIsOpen = !isOpen
    setIsOpen(nextIsOpen)

    if (nextIsOpen) {
      onOpen()
    } else {
      onClose()
    }
  }

  return [isOpen, handleToggle]
}

const ChildProduct = ({ onOpen, onClose }) => {
  const [isOpen, handleToggle] = useToggle({ onOpen, onClose })

  return (
    <div>
      <button
        onClick={handleToggle}
      >
        Toggle quick view
      </button>
    </div>
  )
}

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: dev.to

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jan 03 2023

Quaint Quelea

0 Answers Avg Quality 2/10

react customHook

Contents

More Related Answers

react customHook

Closely Related Answers

react customHook example

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.