https://github.com/recksjs/recks

🐶 React-like RxJS-based framework
https://github.com/recksjs/recks

dom framework jsx react rxjs typescript

Last synced: 6 days ago
JSON representation

🐶 React-like RxJS-based framework

• Host: GitHub
• URL: https://github.com/recksjs/recks
• Owner: recksjs
• License: mit
• Created: 2019-11-27T19:32:49.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:18:57.000Z (almost 2 years ago)
• Last Synced: 2024-12-05T13:42:05.551Z (20 days ago)
• Topics: dom, framework, jsx, react, rxjs, typescript
• Language: TypeScript
• Homepage: https://recks.gitbook.io/
• Size: 2.27 MB
• Stars: 145
• Watchers: 6
• Forks: 9
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - recks - like RxJS-based framework | recksjs | 108 | (TypeScript)

README

        
# Intro to RecksJS

[![NPM](https://img.shields.io/npm/v/recks)](https://www.npmjs.com/package/recks) [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/recks?label=gzipped)](https://bundlephobia.com/result?p=recks@latest) [![MIT license](https://img.shields.io/npm/l/recks)](https://opensource.org/licenses/MIT)

> Official docs: [**recks.gitbook.io**](https://recks.gitbook.io)

RecksJS is a **framework based on streams**

```jsx

import Recks from 'recks';

import { timer } from 'rxjs';

function App() {

  const ticks$ = timer(0, 1000);

  return 


    
{ ticks$ }

    
seconds passed

  

}

```


Try it in this [**online sandbox**](https://codesandbox.io/s/recks-example-greeting-input-tu6tp?file=/src/App.jsx) or [**install locally**](https://recks.gitbook.io/recks/install)

⚠️ RecksJS is currently in beta

## 🔎 Overview

Observables are first class citizens in Recks ❤️

```jsx

function App() {

  return 
{ timer(0, 1000) }

}

```


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

```jsx

function App() {

  return timer(0, 1000).pipe(

    map(x => 
{ x }
)

  );

}

```


_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:

```jsx

function App() {

  const result = axios.get(url).then(r => r.data);

  return 


    { result }

  

}

```


To get a better understanding of Recks concepts, read this article: ["Intro to Recks: Rx+JSX experiment"](https://dev.to/kosich/recks-rxjs-based-framework-23h5) and check out [API](https://recks.gitbook.io/recks/api/) docs section

## 📖 Examples

### 1. Hello world

Just a basic, no "moving parts"

```jsx

import Recks from 'recks';

function App() {

  return 
Hello world!

}

```


### 2. Timer

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

```jsx

import Recks from 'recks';

import { timer } from 'rxjs';

function App() {

  const ticks$ = timer(0, 1000);

  return 


    
{ ticks$ }

    
seconds passed

  

}

```


[online sandbox](https://codesandbox.io/s/recks-example-timer-fjyvj?fontsize=14&hidenavigation=1&theme=dark&module=/src/App)

### 3. Greeting

Uses a simple [Subject](https://rxjs.dev/api/index/class/Subject) to store local component state:

```jsx

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 


     name$.next(e.target.value)}

    />

    { view$ }

  

}

```


[online sandbox](https://codesandbox.io/s/recks-example-greeting-input-tu6tp?fontsize=14&hidenavigation=1&theme=dark&module=/src/App)

### 4. Counter

Traditional counter example with a [Subject](https://rxjs.dev/api/index/class/Subject):

```jsx

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 


    input$.next(-1) }>

      minus

    


    { view$ }

    input$.next( 1) }>

      plus

    

  

}

```


[online sandbox](https://codesandbox.io/s/recks-example-counter-lw29e?fontsize=14&hidenavigation=1&theme=dark&module=/src/App)

## 📚 Docs

Continue reading:

* \*\*\*\*[**Installation guide**](https://recks.gitbook.io/recks/install)\*\*\*\*

* [Lifecycle](https://recks.gitbook.io/recks/api/lifecycle)

* [Events](https://recks.gitbook.io/recks/api/events)

* [Subcomponents](https://recks.gitbook.io/recks/api/subcomponents)

* [Lists](https://recks.gitbook.io/recks/api/lists)

* [DOM references](https://recks.gitbook.io/recks/api/dom-references)