State based input library for the browser

Overview

Inp

State based input library for the browser.


Installation:

Either install with npm or use a CDN such as unpkg (eg. https://unpkg.com/inp/index.js).

Usage:

import InputReader from 'path/to/inp.js';

let input = InputReader();
const frameRate = 1000/60;
function main() {
	/* input.down tells you if that button is down in the current frame / step. */
	if(input.down('a')) console.log('Key "A" pressed!');
	/* input.up does much the same as input.down but instead tells you if the button was released this frame */
	if(input.up('MouseLeft')) console.log('Left Mouse Button was released this timestep.');
	/* use input.mouse to get the position of the mouse this frame */
	console.log(input.mouse('x'), input.mouse('y'));
	console.log(input.mouse().x, input.mouse('both').y);
	/* and input.step at the end of you main loop to step forward. Nothing will work unless you do this. */
	input.step();
	setTimeout(main, frameRate);
}
main();

API:

InputReader.down(key: string): boolean

Takes in a string that is either a valid event.key, "MouseLeft", "MouseRight", "MouseMiddle", "MouseBack", or "MouseForward". Returns a boolean of whether it's down.


InputReader.up(key: string): boolean

Similar InputReader.down, tells you if a key has been released this timestep, takes the same arguments as InputReader.down.


InputReader.mouse(which?: string): number | Object

Takes in a string that is either "x", "y", or "both", returns the X position of the mouse, the Y position of the mouse, or {x: , y: } , respectively. If no argument is given it defaults to "both".


InputReader.step(): void

Steps forward once and updates everything. Required to be called before any inputs can be read correctly.


(:

You might also like...

A tiny, reactive JavaScript library for structured state and tabular data.

A JavaScript library for structured state. Using plain old JavaScript objects to manage data gets old very quickly. It's error-prone, tricky to track

Jan 1, 2023

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time. Dropdown, navigation bu

Nov 25, 2022

A library for updating your immutable state in JavaScript applications.

ionic-bond A library for updating immutable states in JavaScript applications. Introduction This library is a very lightweight replacement for immer,

Nov 15, 2022

A robust form library for Lit that enriches input components with easy-to-use data validation features.

A robust form library for Lit that enriches input components with easy-to-use data validation features.

EliteForms A robust form library for Lit that enriches input components with easy-to-use data validation features. Installation npm install elite-form

Jun 28, 2022

➷ A robust Javascript library for capturing keyboard input. It has no dependencies.

Hotkeys HotKeys.js is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb) (gzip

Jan 4, 2023

jquery-input-mask-phone-number.js - A simple, easy jquery format phone number mask library

jquery-input-mask-phone-number.js - A simple, easy jquery format phone number mask  library

jquery-input-mask-phone-number A jQuery Plugin to make masks on input field to US phone format. Quick start 1. Add latest jQuery and jquery-input-mask

Aug 25, 2022

A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.

Apr 13, 2022

An event emitter that allows you to manage your global state

Thor Event Emitter Event emitter to manage your state. An event emitter that allows you to manage your global state. Instead of using global giant obj

Apr 18, 2022

A helper to use immer as Solid.js Signal to drive state

Solid Immer A helper to use immer as Solid.js Signal to drive state. Installation $ npm install solid-immer Usage Use createImmerSignal to create a im

Nov 22, 2022
Owner
null
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A Bootstrap plugin to create input spinner elements for number input

bootstrap-input-spinner A Bootstrap / jQuery plugin to create input spinner elements for number input. Demo page with examples Examples with floating-

Stefan Haack 220 Nov 7, 2022
A phone input component that uses intl-tel-input for Laravel Filament

Filament Phone Input This package provides a phone input component for Laravel Filament. It uses International Telephone Input to provide a dropdown o

Yusuf Kaya 24 Nov 29, 2022
An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon class in an input element.

Font Awesome Browser An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon

Gianluca Chiarani 1 May 1, 2021
A tiny foundation that providing nested state-based routing for complex web application.

StateMan stateman: A tiny foundation that provides nested state-based routing for complex web applications. stateman is highly inspired by ui-router;

ZhengHaibo 390 Dec 20, 2022
jQuery tags input plugin based on Twitter Bootstrap.

Bootstrap Tags Input Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Current stable version: v

null 26 Dec 21, 2022
Beautiful UI-Range input component, highly customisable, based on CSS variables.

Beautiful UI-Range input component, highly customisable, based on CSS variables. including a floating output value, min & max values on the sides & ticks according to the steps

Yair Even Or 73 Dec 27, 2022
A Masked Input Component based on Ant Design.

antd-input-mask A Masked Input Component based on Ant Design. Usage Example Contributing How to run PR template Issue template Developed by bem-te-vi

bem.te.vi 6 Oct 24, 2022
Solid.js library adding a services layer for global shared state.

Solid Services Services are "global" objects useful for features that require shared state or persistent connections. Example uses of services might i

Maciej Kwaśniak 55 Dec 30, 2022