https://github.com/taystack/use-leet
React Hook: Leet-ify your text with leet speak. React hook turns your given text value into 1337 SP34K.
https://github.com/taystack/use-leet
Last synced: 5 months ago
JSON representation
React Hook: Leet-ify your text with leet speak. React hook turns your given text value into 1337 SP34K.
- Host: GitHub
- URL: https://github.com/taystack/use-leet
- Owner: taystack
- License: other
- Created: 2020-02-16T00:07:22.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T07:22:54.000Z (almost 3 years ago)
- Last Synced: 2025-06-20T13:55:59.589Z (6 months ago)
- Language: JavaScript
- Homepage: https://taystack.github.io/use-leet
- Size: 3.6 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@taystack/use-leet) [](https://standardjs.com) [](https://codecov.io/gh/taystack/use-leet) [](http://www.wtfpl.net/about/)
# @taystack/use-leet
> Leet-ify your text with leet speak. React hook turns your given text value into 1337 SP34K.
[71v3 d3m0](https://taystack.github.io/use-leet/index.html)
## Install
```bash
npm install --save @taystack/use-leet
```
## Usage
```jsx
import React from "react";
import { useLeet } from "@taystack/use-leet";
const Example = () => {
const [value, setValue, leetValue] = useLeet("dope hacks!");
return (<>
setValue(event.target.value)}
/>
{leetValue}
>);
}
// => ( react fragment )
//
// d0p3 haxzorz
const ExampleWithCustomLeetMap = () => {
const leetMap = { c: "¢" };
const [stateValue, stateValueSetter, leetValue] = useLeet("nice zeebra dude", leetMap);
return (
{leetValue});
}
/* => n1¢3 z33br4 d00d */
```
## Setting your `leetMap` globally
It's possible to just set your optional `leetMap` from an exported global `UseLeet`. Once this is done, you don't have to worry about providing it in the hook.
```jsx
import UseLeet from "@taystack/use-leet";
import App from "./App";
const customLeetMap = { c: "¢" };
UseLeet.setMap(customLeetMap); // <- set it and forget it
ReactDOM.render(, document.getElementById('root'))
```
## default export `UseLeet`
`import UseLeet from "@taystack/use-leet";`
#### `UseLeet.setMap( HASH customLeetMap )`
| argument | type | effect |
|---|---|---|
|customLeetMap|`HASH`|Configures matching letters to return `STRING` values|
```jsx
const myCustomLeetMap = { a: "@", g: "6", c: "¢", n: "ñ", "i": "¡" };
UseLeet.setMap(myCustomLeetMap);
function ShowLeet({ text }) => {
const [val, setVal, leetText] = useLeet("I crunch granola");
return (<>{leetText}>);
}
// => "¡ ¢ruñ¢h 6r@ñ01@"
```
#### `UseLeet.setGenerator( FUNC customGenerator )`
| argument | type | effect |
|---|---|---|
|customGenerator|`FUNC`|customGenerator overrides the default leet generator. Make this method return a string|
```jsx
const customJavaScriptLeetTranslator = text => text.toUpperCase();
UseLeet.setGenerator(customJavaScriptLeetTranslator);
//...
const [_, set_, leetVal] = useLeet("this text");
// => leetVal = "THIS TEXT"
```
## export `useLeet`
`const [STRING value, FUNC setValue, STRING leetValue] = useLeet ( STRING defaultValue [, customLeetMap HASH ])`
This is essentially `const [value, setValue] = useState("")` but with an extra returned item `leetValue`.
| argument | type | effect | required | default value |
|---|---|---|---|---|
| `defaultValue` | `STRING`| The value to initialize with | No | "" |
| `customLeetMap` | `HASH` | {`key`/`value`} pairs to override default leet map | No | {} |
| returns | type | effect |
|---|---|---|
| `value` | `STRING`| This is [`value`, _] = useState(`defaultValue`) |
| `setValue` | `FUNC` | This is [`value`, `setValue`] = useState(`defaultValue`), re-converts `leetValue` automatically |
| `leetValue` | `STRING` | The converted 7334 |
## License
WTFPL © [taystack](https://github.com/taystack)
---
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).