https://github.com/herudi/nanojsx-hooks
Experimental hooks with nanojsx
https://github.com/herudi/nanojsx-hooks
Last synced: 3 months ago
JSON representation
Experimental hooks with nanojsx
- Host: GitHub
- URL: https://github.com/herudi/nanojsx-hooks
- Owner: herudi
- Created: 2022-06-07T09:04:09.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-06-18T22:43:47.000Z (almost 3 years ago)
- Last Synced: 2025-01-10T19:57:06.666Z (5 months ago)
- Language: HTML
- Homepage:
- Size: 28.3 KB
- Stars: 13
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Nanojsx Hooks
Experimental hooks with [nanojsx](https://nanojsx.io).
[](https://www.npmjs.com/package/nanojsx-hooks) [](https://deno.land/x/nanojsx_hooks)
[](https://codecov.io/gh/herudi/nanojsx-hooks)
## Hooks
- useState
- useEffect
- useReducer
- useMemo
- useCallback
- useRef
- useContext## Install
```bash
npm i nanojsx-hooks
```## Usage
```jsx
/** @jsx h */
import { h, render } from "nano-jsx";
import { Hooked, useEffect, useState } from "nanojsx-hooks";// deno
// import { Hooked, useEffect, useState } from "https://deno.land/x/nanojsx_hooks/mod.ts";function Counter() {
const [count, setCount] = useState(0);useEffect(() => {
// log
console.log(count);
}, [count]);return (
{
setCount(count + 1);
}}
>
Increment
Counter: {count}
);
}Hooked.bind(render)(Counter, document.getElementById("app"));
// ssr
// const str = Hooked.bind(renderSSR)(Counter);
// console.log(str)
```## Example Usage
```bash
git clone https://github.com/herudi/nanojsx-hooks.gitcd nanojsx-hooks
deno task dev
```> Hot-reloading support. just edit file in src folders.
## Build (Node.js)
```bash
git clone https://github.com/herudi/nanojsx-hooks.gitcd nanojsx-hooks
npm i
npm run build
```