Intro to RecksJS

NPM Bundlephobia MIT license

Official docs: recks.gitbook.io

RecksJS is a framework based on streams

import Recks from 'recks';
import { timer } from 'rxjs';
function App() {
const ticks$ = timer(0, 1000);
return <div>
<h1>{ ticks$ }</h1>
<p>seconds passed</p>
</div>
}

Try it in this online sandbox or install locally

⚠️ RecksJS is currently in beta

🔎 Overview

Observables are first class citizens in Recks ❤️

function App() {
return <div>{ timer(0, 1000) }</div>
}

You can also do other way around: map a stream on JSX

function App() {
return timer(0, 1000).pipe(
map(x => <div>{ x }</div>)
);
}

Recks will subscribe to and unsubscribe from provided streams automatically, you don't have to worry about that!

And you can use Promises that will display the result, once resolved:

function App() {
const result = axios.get(url).then(r => r.data);
return <div>
{ result }
</div>
}

To get a better understanding of Recks concepts, read this article: "Intro to Recks: Rx+JSX experiment" and check out API docs section

📖 Examples

1. Hello world

Just a basic, no "moving parts"

import Recks from 'recks';
function App() {
return <h1>Hello world!</h1>
}

2. Timer

RxJS' timer here will emit an integer every second, updating the view

import Recks from 'recks';
import { timer } from 'rxjs';
function App() {
const ticks$ = timer(0, 1000);
return <div>
<h1>{ ticks$ }</h1>
<p>seconds passed</p>
</div>
}

online sandbox

3. Greeting

Uses a simple Subject to store local component state:

import Recks from 'recks';
import { Subject } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
function App() {
const name$ = new Subject();
const view$ = name$.pipe(
map(x => x ? `Hello, ${x}!` : ''),
startWith('')
);
return <div>
<input
placeholder="enter your name"
onInput={e => name$.next(e.target.value)}
/>
{ view$ }
</div>
}

online sandbox

4. Counter

Traditional counter example with a Subject:

import Recks from 'recks';
import { Subject } from 'rxjs';
import { scan, startWith } from 'rxjs/operators';
function App() {
const input$ = new Subject();
const view$ = input$.pipe(
startWith(0),
scan((acc, curr) => acc + curr)
);
return <div>
<button onClick={ ()=>input$.next(-1) }>
minus
</button>
{ view$ }
<button onClick={ ()=>input$.next( 1) }>
plus
</button>
</div>
}

online sandbox

📚 Docs

Continue reading: