https://github.com/cedmandocdoc/guhit
A reactive JavaScript library for building web user interfaces
https://github.com/cedmandocdoc/guhit
Last synced: 8 months ago
JSON representation
A reactive JavaScript library for building web user interfaces
- Host: GitHub
- URL: https://github.com/cedmandocdoc/guhit
- Owner: cedmandocdoc
- License: mit
- Created: 2020-07-31T11:25:29.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T10:18:30.000Z (over 3 years ago)
- Last Synced: 2025-07-29T15:49:09.260Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 845 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Guhit
A reactive JavaScript library for building web user interfaces
## Installation
Install it using npm or yarn.
```bash
npm install agos guhit
```
## Example
```javascript
import { pipe, map } from "agos";
import { mount, createState, e } from "./src";
const TextCount = count$ => {
// return a transformed id (id-{count})
// manipulate the
const countId = pipe(
count$,
map(c => `id-${c}`)
);
const currentCount = pipe(
count$,
map(c => {
if (c % 2 === 0) return "Cannot display even number";
return c;
})
);
// return a
with id and text count changing
return e("p", { id: countId }, {}, ["Current count: ", currentCount]);
};
const App = () => {
// Since observable is directly manipulating the DOM
// there is no re rendering happenning inside the App.
// Running setCount will not rerender the App but will
// directly manipulate the
on TextCount.
// here count is an observable that gets
// subscribed on TextCount to change its values
const count$ = create((open, next, fail, done) => {
let count = 0;
const id = setInterval(() => next(++count), 100);
open();
})
// return a div with text count
return e("div", {}, {}, ["Hello There", TextCount(count$)]);
};
mount(document.getElementById("app"), App());
```