Universal hooks

Read this in other languages: Русский

Universal hooks - is a small React-hooks library, that usually need in project. Hooks are written with TypeScript. At the moment there are these hooks:

• use-toggle
• use-outside-event
• use-keyboard-event
• use-screen-type
• use-media-query
• more...

---

Usage

---

Installation

1npm i universal-hooks

---

use-toggle

It's a simple hook to control Boolean value, it returns methods to set values, toggle value method and value. use-toggle hook can optionally take initial value

1import { useToggle } from 'universal-hooks';
2
3const { value, toggle, handleOn, handleOff, setValue } = useToggle(false)

---

use-outside-event

Hook that helps to subscribe on events outside of element. It takes ref on element, callback and optionally event type (like click, dblclick and other from GlobalEventHandlersEventMap)

1import { useRef } from 'react';
2import { useOutsideEvent } from 'universal-hooks';
3
4const callback = () => console.log('It works!')
5
6const Component = () => {
7  const ref = useRef(null)
8  useOutsideEvent({ ref, callback, eventType: 'click' })
9
10  return <div>
11    <div ref={ref}>First div</div>
12    <div>Second div</div>
13  </div>
14}

---

use-keyboard-event

Hook that helps to subscribe on keyboard events. It takes key - string with keyboard key, callback, optionally event type (like keyup, keydown and keypressed), and optionally isCtrlOrCmdPressed - boolean for keyboard shortcuts with ctrl or cmd key

1import { useRef } from 'react';
2import { useKeyboardEvent } from 'universal-hooks';
3
4const callback = () => console.log('It works!')
5
6const Component = () => {
7  const ref = useRef(null)
8  
9  // ctrl+j shortcut
10  useKeyboardEvent({
11    callback,
12    key: 'j',
13    eventType: 'keyup',
14    isCtrlOrCmdPressed: true,
15  })
16
17  // subscribe on Escape key press
18  useKeyboardEvent({
19    callback,
20    key: 'Escape',
21    eventType: 'keypress',
22  })
23
24  return <div>
25    <div ref={ref}>First div</div>
26    <div>Second div</div>
27  </div>
28}