function useKeyPress(fn) {
useEffect(() => {
window.addEventListener("keypress", fn);
return () => window.removeEventListener("keypress", fn);
}, [fn]) // <- 'fn' is in the dependencies
}
{
return function Component() {
useKeyPress(() => {
console.log("Some key was pressed");
});
return null;
}
}
{
function onKeyPress() {
console.log("Some key was pressed");
}
return function Component() {
useKeyPress(onKeyPress);
return null;
}
}
{
return function Component(props) {
const { id } = props
useKeyPress(useCallback(() => {
console.log(`Some key was pressed (handled in component ${id})`);
}, [id]));
return null;
}
}
function useBetterKeyPress(fn) {
// Create a ref which keeps a reference to the current version of the callback.
const ref = useRef(fn)
ref.current = fn
useEffect(() => {
function onKeyPress() {
// Invoke whatever callback the ref is currently pointing to.
ref.current()
}
window.addEventListener("keypress", onKeyPress);
return () => window.removeEventListener("keypress", onKeyPress);
}, []) // <- no dependencies!
}
function useKeyPressOptions(fn, options = { delay: 0 }) {
const ref = useRef({ fn, options })
ref.current = { fn, options }
useEffect(() => {
function onKeyPress() {
setTimeout(ref.fn.current, ref.options.delay)
}
window.addEventListener("keypress", onKeyPress);
return () => window.removeEventListener("keypress", onKeyPress);
}, [])
}
{
return function Component(props) {
const { id, delay } = props
useKeyPressOptions(() => {
console.log(`Some key was pressed (handled in component ${id}, after delay ${delay}ms)`);
}, { delay })
return null;
}
}
import { useState, useEffect, useCallback, useRef, component, jsx, render } from "@j-f1/react"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
