https://github.com/herudi/nanojsx-hooks

Experimental hooks with nanojsx
https://github.com/herudi/nanojsx-hooks

Last synced: 4 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://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

```