An open API service indexing awesome lists of open source software.

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

Awesome Lists containing this project

README

        

## Nanojsx Hooks

Experimental hooks with [nanojsx](https://nanojsx.io).

[![](https://img.shields.io/badge/available%20on-npmjs.com-lightgrey.svg?logo=node.js&logoColor=339933&labelColor=white)](https://www.npmjs.com/package/nanojsx-hooks) [![](https://img.shields.io/badge/available%20on-deno.land/x-lightgrey.svg?logo=deno&labelColor=black)](https://deno.land/x/nanojsx_hooks)

[![codecov](https://codecov.io/gh/herudi/nanojsx-hooks/branch/master/graph/badge.svg)](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.git

cd 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.git

cd nanojsx-hooks

npm i

npm run build
```