README
@taystack/use-leet
Leet-ify your text with leet speak. React hook turns your given text value into 1337 SP34K.
Install
npm install --save @taystack/use-leet
Usage
import React from "react";
import { useLeet } from "@taystack/use-leet";
const Example = () => {
const [value, setValue, leetValue] = useLeet("dope hacks!");
return (<>
<input
defaultValue={value}
onChange={event => setValue(event.target.value)}
/>
<div>{leetValue}</div>
</>);
}
// => ( react fragment )
// <input />
// <div>d0p3 haxzorz</div>
const ExampleWithCustomLeetMap = () => {
const leetMap = { c: "¢" };
const [stateValue, stateValueSetter, leetValue] = useLeet("nice zeebra dude", leetMap);
return (<div>{leetValue}</div>);
}
/* => <div>n1¢3 z33br4 d00d</div> */
leetMap
globally
Setting your 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.
import UseLeet from "@taystack/use-leet";
import App from "./App";
const customLeetMap = { c: "¢" };
UseLeet.setMap(customLeetMap); // <- set it and forget it
ReactDOM.render(<App />, document.getElementById('root'))
useLeet
default export 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
This hook is created using create-react-hook.