https://github.com/commenthol/hooked-hyper

hyperscript on hooks
https://github.com/commenthol/hooked-hyper

hooks hyperscript react-like

Last synced: 1 day ago
JSON representation

hyperscript on hooks

• Host: GitHub
• URL: https://github.com/commenthol/hooked-hyper
• Owner: commenthol
• License: unlicense
• Created: 2021-10-25T06:20:40.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-30T15:55:30.000Z (about 3 years ago)
• Last Synced: 2024-12-12T22:47:26.405Z (29 days ago)
• Topics: hooks, hyperscript, react-like
• Language: JavaScript
• Homepage: https://commenthol.github.io/hooked-hyper/
• Size: 12.7 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# hooked-hyper

> hyperscript on hooks

[Demo](https://commenthol.github.io/hooked-hyper)

This is a very simple hyperscript library to render elements directly in the DOM. So don't expect a vDOM. 

Hooks are supported as well. 

Hooks have same syntax as [React Hooks](https://reactjs.org/docs/hooks-reference.html).

Re-rendering is done by (brutally) removing the affected childs. Scroll-states may get messed-up.

Size is ~1kB minimized and gzipped.

Will work only on modern browsers.

Credits 

👏 go to [zserge/o](https://github.com/zserge/o) for inspiration.

## h, render

Function `h` is used to render elements into the DOM.

    h(element, props, children)

`element` can be of type HTML-Node, string or functions (functional components) are accepted.

```js

render(document.body, {}, [

  h('span', { className: 'lorem' }, 'Lorem')

  h('span', {}, 'ipsum')

])

```

renders as 

```html

  Lorem

  ipsum

```

Functional components have `children` passed as props (as with react).

e.g. to render children nodes within a ``:  

```js

// functional component

function Comp ({ children, ...props }) {

  return h('section', props, children)

}

// rendering

render(document.body, {}, [

  h(Comp, { className: 'red' }, [

    h('span', { className: 'lorem' }, 'Lorem')

    h('span', {}, 'ipsum')

  ])

])

```

renders as 

```html

  

    Lorem

    ipsum

  

```

## usage

```js

import { h, render } from './h.js'

const style = `

body > .red { color: red; } 

`

render(document.body, {}, [

  h('style', {}, style),

  h('h1', { className: 'red' }, [

    'hooked hyperscript'

  ]),

  h('p', {}, '/* escaping works */'),

  h('p', { style: { 

    color: 'blue', 

    textTransform: 'uppercase' 

  } }, 'Lorem ipsum.'),

  h('button', { 

    onClick: () => alert('clicked'), 

    style: { marginBottom: '1em' } 

  }, 'Click me'),

])

```

## usage with hooks

```js

import { render, h, Fragment, useState } from './h.js'

function Counter (props) {

  const style = { padding: '1em' }

  const [count, setCount] = useState(0)

  return h(Fragment, {}, [

    h('button', { style, onClick: () => setCount(count - 1)}, '-'),

    h('span', props, count),

    h('button', { style, onClick: () => setCount(count + 1)}, '+'),

  ])

}

render(document.body, {}, 

  h(Counter, { style: { color: 'cyan' } })

)

```

Other hooks like `useReducer`, `useEffect`, `useMemo`, `useCallback`, `useRef` and `useContext` are supported as well.

# license

[The Unlicense](https://unlicense.org)