1.0.2 • Published 5 years ago
react-shotcuts-library v1.0.2
React Shotcuts
A react keyboard shotcuts library
Installation
npm install -S react-shotcuts-library
Usage
Wrap your App component with ShotcutProvider (this would allow you to access you shotcuts listeners information thoughout your application)
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { ShotcutProvider } from "react-shotcuts-library";
import App from './App';
ReactDOM.render(
<ShotcutProvider>
<App />
</ShotcutProvider>
, document.getElementById('root')
);
Import and use the components in your App.js
import React from "react";
import { Shotcut } from "react-shotcuts-library";
export default class MyComponent extends React.Component {
handleShotcutEvent = () => {
// Handle shotcut event
}
render() {
return (
<div>
// ...
<Shotcut
shotcut={"ctlr+a"} // Shotcut key combination separated by '+'
handler={this.handleShotcutEvent} // Shotcut event handler
description={"Select all content"} // Describe what happens when event occurs
/>
</div>
)
}
}
To show a help section to the user, import withShotcuts and use the components in your Help.js
// Help.js
import React from "react";
import { withShotcuts } from "react-shotcuts-library";
const Help = ({ shotcuts }) => {
return (
<div>
{shotcuts.map((shotcut) => (
<div key={shotcut.id}>
<strong>
{shotcut.shotcut}
</strong>:
{shotcut.description}
</div>
))}
</div>
)
}
export default withShotcuts(Help); // withShotcuts passes a prop shotcuts to the component
Setup
Use this demo app for your refernce.