Basic Quickey React jsFiddle

by Udi Talias

HTML

<script src="https://unpkg.com/@quickey/core/umd/quickey.core.min.js"></script>
<script src="https://unpkg.com/@quickey/react/umd/quickey.react.min.js"></script>
<div id="app"></div>

React

/**
 * For documentations, Refer to:
 * https://github.com/quickey/quickey/tree/master/packages/react
 */

const { QuickeyContext } = Quickey.react;

class App extends React.Component {
	render() {
  	return (
    	<div>
            <header>App Header</header>
            <p>
              Lorem ipsum dolor sit amet, no movet tollit delectus has. Ad     consul noluisse elaboraret mei, id epicuri disputationi vel, an eos simul dicant epicuri. Liber torquatos ei duo, eos ea dicta propriae. Voluptatum comprehensam concludaturque pro in, ad mel perfecto patrioque. His ad decore altera persius. Ea vix veri posse, mea postea verear nonumes ex.
            </p>
            <QuickeyContext
                id="cheats"
                actions={[
                    { keys: "I > D > D > Q > D", callback: () => alert("GOD Mode!") },
                    { keys: "I > D > K > F > A", callback: () => alert("Full Inventory!") }
                ]}
            >
                <p>
                   <b>
                    Focus this element and enter a cheat code!
                  </b>
                </p>
            </QuickeyContext>
            <p>
              Lorem ipsum dolor sit amet, no movet tollit delectus has. Ad     consul noluisse elaboraret mei, id epicuri disputationi vel, an eos simul dicant epicuri. Liber torquatos ei duo, eos ea dicta propriae. Voluptatum comprehensam concludaturque pro in, ad mel perfecto patrioque. His ad decore altera persius. Ea vix veri posse, mea postea verear nonumes ex.
            </p>
            <footer>App Footer</footer>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))