Arrow Keys React
Easily integrate your react component with keyboard arrow keys, with the same configuration used in swipe-react and wheel-react packages.
Usage
- Install the npm package:
npm install --save arrow-keys-react
- Import it:
;
- Config arrow keys events ('left', 'right', 'up', 'down'), at least one of them, in your component constructor, or in render function:
ArrowKeysReact;
- Integrate with your React component:
<YourComponent ...ArrowKeysReactevents />
Example
import React Component from 'react';import ArrowKeysReact from 'arrow-keys-react'; { ; thisstate = content: 'Use arrow keys on your keyboard!' ; ArrowKeysReact; } { return <div ="1"> thisstatecontent </div> ; } ;
Remarks
- When you use
div
, addtabIndex
property. - The element must be on focus in order to detect arrow keys. The arrow keys will be detected when the user will click on the element, or focus it using
tab
key in the keyboard. Alterntively you can program your component tofocus()
when it loaded. ArrowKeysReact.config
can be placed inrender
function instead of in theconstuctor
function.