https://github.com/elbywan/rescript-hyperactiv
Hyperactiv bindings for ReScript
https://github.com/elbywan/rescript-hyperactiv
hyperactiv reactive rescript rescript-bindings
Last synced: 5 months ago
JSON representation
Hyperactiv bindings for ReScript
- Host: GitHub
- URL: https://github.com/elbywan/rescript-hyperactiv
- Owner: elbywan
- Created: 2021-10-03T09:04:35.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-10-03T16:45:14.000Z (over 4 years ago)
- Last Synced: 2025-02-05T21:35:56.862Z (11 months ago)
- Topics: hyperactiv, reactive, rescript, rescript-bindings
- Language: ReScript
- Homepage:
- Size: 3.91 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚡️🔗 [Hyperactiv](https://github.com/elbywan/hyperactiv) bindings for [ReScript](https://rescript-lang.org/)
## Installation
```sh
npm i rescript-hyperactiv
```
## Usage
```rescript
type store = {mutable counter: int}
let logHandler = Hyperactiv.Handlers.debugger(%raw("console"))
let store = {
open Hyperactiv
let storeRef = React.makeStore({counter: 0})
let store = storeRef->unwrap
computed(() => {
store.counter = store.counter > 0 ? store.counter + 1 : store.counter
})->ignore
Handlers.set(storeRef, logHandler)
store
}
let classStore = {
open Hyperactiv.Classes
let storeRef = make({counter: 0})
storeRef->computed(@this this => this.counter = this.counter * 2)
storeRef->onChange(logHandler)
storeRef->unwrap
}
module Root = {
@react.component
let make = Hyperactiv.React.watch(() => {
<>
{React.int(store.counter)}
{React.int(classStore.counter)}
{
store.counter = store.counter + 1
classStore.counter = classStore.counter + 1
}}>
{React.string("Click me")}
>
})
}
switch ReactDOM.querySelector("#root") {
| Some(root) => ReactDOM.render(, root)
| None => ()
}
```