recks
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.14 • Public • Published

    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:

    Install

    npm i recks

    DownloadsWeekly Downloads

    4

    Version

    0.0.14

    License

    MIT

    Unpacked Size

    283 kB

    Total Files

    141

    Last publish

    Collaborators

    • kosich