How to use react-hotkeys-hook - 5 common examples
To help you get started, we’ve selected a few react-hotkeys-hook examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
screego / server / ui / src / Room.tsx View on Github 
(err) => enqueueSnackbar('Copy Failed ' + err, {variant: 'error'})
);
};
const setHoverState = React.useMemo(
() => ({
onMouseLeave: () => setHoverControl(false),
onMouseEnter: () => setHoverControl(true),
}),
[setHoverControl]
);
const controlVisible = showControl || open || showMore || hoverControl;
useHotkeys('s', () => (state.hostStream ? stopShare() : share()), [state.hostStream]);
useHotkeys(
'f',
() => {
if (selectedStream) {
videoElement?.requestFullscreen();
}
},
[videoElement, selectedStream]
);
useHotkeys('c', copyLink);
useHotkeys(
'h',
() => {
if (state.clientStreams !== undefined && state.clientStreams.length > 0) {
const currentStreamIndex = state.clientStreams.findIndex(
({id}) => id === selectedStream
););
const controlVisible = showControl || open || showMore || hoverControl;
useHotkeys('s', () => (state.hostStream ? stopShare() : share()), [state.hostStream]);
useHotkeys(
'f',
() => {
if (selectedStream) {
videoElement?.requestFullscreen();
}
},
[videoElement, selectedStream]
);
useHotkeys('c', copyLink);
useHotkeys(
'h',
() => {
if (state.clientStreams !== undefined && state.clientStreams.length > 0) {
const currentStreamIndex = state.clientStreams.findIndex(
({id}) => id === selectedStream
);
const nextIndex =
currentStreamIndex === state.clientStreams.length - 1
? 0
: currentStreamIndex + 1;
setSelectedStream(state.clientStreams[nextIndex].id);
}
},
[state.clientStreams, selectedStream]
);
useHotkeys(() => enqueueSnackbar('Link Copied', {variant: 'success'}),
(err) => enqueueSnackbar('Copy Failed ' + err, {variant: 'error'})
);
};
const setHoverState = React.useMemo(
() => ({
onMouseLeave: () => setHoverControl(false),
onMouseEnter: () => setHoverControl(true),
}),
[setHoverControl]
);
const controlVisible = showControl || open || showMore || hoverControl;
useHotkeys('s', () => (state.hostStream ? stopShare() : share()), [state.hostStream]);
useHotkeys(
'f',
() => {
if (selectedStream) {
videoElement?.requestFullscreen();
}
},
[videoElement, selectedStream]
);
useHotkeys('c', copyLink);
useHotkeys(
'h',
() => {
if (state.clientStreams !== undefined && state.clientStreams.length > 0) {
const currentStreamIndex = state.clientStreams.findIndex(
({id}) => id === selectedStream'h',
() => {
if (state.clientStreams !== undefined && state.clientStreams.length > 0) {
const currentStreamIndex = state.clientStreams.findIndex(
({id}) => id === selectedStream
);
const nextIndex =
currentStreamIndex === state.clientStreams.length - 1
? 0
: currentStreamIndex + 1;
setSelectedStream(state.clientStreams[nextIndex].id);
}
},
[state.clientStreams, selectedStream]
);
useHotkeys(
'l',
() => {
if (state.clientStreams !== undefined && state.clientStreams.length > 0) {
const currentStreamIndex = state.clientStreams.findIndex(
({id}) => id === selectedStream
);
const previousIndex =
currentStreamIndex === 0
? state.clientStreams.length - 1
: currentStreamIndex - 1;
setSelectedStream(state.clientStreams[previousIndex].id);
}
},
[state.clientStreams, selectedStream]
);[setHoverControl]
);
const controlVisible = showControl || open || showMore || hoverControl;
useHotkeys('s', () => (state.hostStream ? stopShare() : share()), [state.hostStream]);
useHotkeys(
'f',
() => {
if (selectedStream) {
videoElement?.requestFullscreen();
}
},
[videoElement, selectedStream]
);
useHotkeys('c', copyLink);
useHotkeys(
'h',
() => {
if (state.clientStreams !== undefined && state.clientStreams.length > 0) {
const currentStreamIndex = state.clientStreams.findIndex(
({id}) => id === selectedStream
);
const nextIndex =
currentStreamIndex === state.clientStreams.length - 1
? 0
: currentStreamIndex + 1;
setSelectedStream(state.clientStreams[nextIndex].id);
}
},
[state.clientStreams, selectedStream]
);react-hotkeys-hook
React hook for handling keyboard shortcuts
