https://github.com/TejasQ/on-awesome
A little package to respond to people typing the word 'awesome' in web apps.
https://github.com/TejasQ/on-awesome
List: on-awesome
Last synced: 4 months ago
JSON representation
A little package to respond to people typing the word 'awesome' in web apps.
- Host: GitHub
- URL: https://github.com/TejasQ/on-awesome
- Owner: TejasQ
- License: mit
- Created: 2022-12-10T03:20:44.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-15T10:20:13.000Z (over 2 years ago)
- Last Synced: 2024-11-26T21:02:07.503Z (5 months ago)
- Language: TypeScript
- Size: 13.7 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- jimsghstars - TejasQ/on-awesome - A little package to respond to people typing the word 'awesome' in web apps. (TypeScript)
README
# `onAwesome`
---
**[Watch the Video](https://www.youtube.com/watch?v=n9XvuMUUnM8)**
---
A _smol_ library that responds to the word "awesome" being typed into the browser. It also exports a lower level `onWord` function that can be used to respond to any word.
## How to Use
First, you'll want to install the library:
```bash
npm i on-awesome
```
Then, in your application, you can use it like so:
```js
import { onAwesome } from "on-awesome";
onAwesome(() => {
alert('You typed the word "awesome"!');
});
```
## API
It returns some utilities to help you manage awesome state:
```js
import { onAwesome } from "on-awesome";
const { cleanUp, isAwesome, reset } = onAwesome(() => {
alert('You typed the word "awesome"!');
});
```
Here's what each function does:
- `cleanUp` - Removes the event listener that was added to the document.
- `isAwesome` - Returns a boolean indicating whether or not the word "awesome" has been typed.
- `reset` - Resets the state of the library so that it can be used again.
### Lower level `onWord` API
If you want to respond to a word other than "awesome", you can onhe `onWord` function:
```js
import { onWord } from "on-awesome";
onWord("ilovetejas", () => {
alert('You typed the word "ilovetejas"!');
});
```
## Usage in a React App
If you're using this library in a React app, you'll want to use the `useEffect` hook to clean up the event listener when the component unmounts:
```js
import { useEffect } from "react";
import { onAwesome } from "on-awesome";
const AwesomeComponent = () => {
useEffect(() => {
const { cleanUp } = onAwesome(() => {
alert('You typed the word "awesome"!');
});
return cleanUp;
}, []);
return
Awesome!;
};
```
## Contributing
You're awesome and I want to collaborate with you! Please feel free to open an issue and we can go from there.