{"id":13618166,"url":"https://github.com/recksjs/recks","last_synced_at":"2025-09-08T16:32:00.450Z","repository":{"id":36436853,"uuid":"224503455","full_name":"recksjs/recks","owner":"recksjs","description":" 🐶 React-like RxJS-based framework","archived":false,"fork":false,"pushed_at":"2023-01-06T02:18:57.000Z","size":2377,"stargazers_count":145,"open_issues_count":20,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-12-26T23:05:25.646Z","etag":null,"topics":["dom","framework","jsx","react","rxjs","typescript"],"latest_commit_sha":null,"homepage":"https://recks.gitbook.io/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/recksjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-27T19:32:49.000Z","updated_at":"2024-11-26T12:26:00.000Z","dependencies_parsed_at":"2023-01-17T01:28:01.469Z","dependency_job_id":null,"html_url":"https://github.com/recksjs/recks","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/recksjs%2Frecks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/recksjs%2Frecks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/recksjs%2Frecks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/recksjs%2Frecks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/recksjs","download_url":"https://codeload.github.com/recksjs/recks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232327025,"owners_count":18505990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","framework","jsx","react","rxjs","typescript"],"created_at":"2024-08-01T20:01:55.554Z","updated_at":"2025-01-03T11:08:28.630Z","avatar_url":"https://github.com/recksjs.png","language":"TypeScript","readme":"# Intro to RecksJS\n\n[![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)\n\n\u003e Official docs: [**recks.gitbook.io**](https://recks.gitbook.io)\n\nRecksJS is a **framework based on streams**\n\n```jsx\nimport Recks from 'recks';\nimport { timer } from 'rxjs';\n\nfunction App() {\n  const ticks$ = timer(0, 1000);\n\n  return \u003cdiv\u003e\n    \u003ch1\u003e{ ticks$ }\u003c/h1\u003e\n    \u003cp\u003eseconds passed\u003c/p\u003e\n  \u003c/div\u003e\n}\n```\n\nTry 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)\n\n⚠️ RecksJS is currently in beta\n\n## 🔎 Overview\n\nObservables are first class citizens in Recks ❤️\n\n```jsx\nfunction App() {\n  return \u003cdiv\u003e{ timer(0, 1000) }\u003c/div\u003e\n}\n```\n\nYou can also do other way around: map a stream on JSX\n\n```jsx\nfunction App() {\n  return timer(0, 1000).pipe(\n    map(x =\u003e \u003cdiv\u003e{ x }\u003c/div\u003e)\n  );\n}\n```\n\n_Recks will subscribe to and unsubscribe from provided streams automatically, you don't have to worry about that!_\n\nAnd you can use Promises that will display the result, once resolved:\n\n```jsx\nfunction App() {\n  const result = axios.get(url).then(r =\u003e r.data);\n\n  return \u003cdiv\u003e\n    { result }\n  \u003c/div\u003e\n}\n```\n\nTo 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\n\n## 📖 Examples\n\n### 1. Hello world\n\nJust a basic, no \"moving parts\"\n\n```jsx\nimport Recks from 'recks';\n\nfunction App() {\n  return \u003ch1\u003eHello world!\u003c/h1\u003e\n}\n```\n\n### 2. Timer\n\nRxJS' timer here will emit an integer every second, updating the view\n\n```jsx\nimport Recks from 'recks';\nimport { timer } from 'rxjs';\n\nfunction App() {\n  const ticks$ = timer(0, 1000);\n\n  return \u003cdiv\u003e\n    \u003ch1\u003e{ ticks$ }\u003c/h1\u003e\n    \u003cp\u003eseconds passed\u003c/p\u003e\n  \u003c/div\u003e\n}\n```\n\n[online sandbox](https://codesandbox.io/s/recks-example-timer-fjyvj?fontsize=14\u0026hidenavigation=1\u0026theme=dark\u0026module=/src/App)\n\n### 3. Greeting\n\nUses a simple [Subject](https://rxjs.dev/api/index/class/Subject) to store local component state:\n\n```jsx\nimport Recks from 'recks';\nimport { Subject } from 'rxjs';\nimport { map, startWith } from 'rxjs/operators';\n\nfunction App() {\n  const name$ = new Subject();\n  const view$ = name$.pipe(\n    map(x =\u003e x ? `Hello, ${x}!` : ''),\n    startWith('')\n  );\n\n  return \u003cdiv\u003e\n    \u003cinput\n      placeholder=\"enter your name\"\n      onInput={e =\u003e name$.next(e.target.value)}\n    /\u003e\n    { view$ }\n  \u003c/div\u003e\n}\n```\n\n[online sandbox](https://codesandbox.io/s/recks-example-greeting-input-tu6tp?fontsize=14\u0026hidenavigation=1\u0026theme=dark\u0026module=/src/App)\n\n### 4. Counter\n\nTraditional counter example with a [Subject](https://rxjs.dev/api/index/class/Subject):\n\n```jsx\nimport Recks from 'recks';\nimport { Subject } from 'rxjs';\nimport { scan, startWith } from 'rxjs/operators';\n\nfunction App() {\n  const input$ = new Subject();\n  const view$  = input$.pipe(\n      startWith(0),\n      scan((acc, curr) =\u003e acc + curr)\n    );\n\n  return \u003cdiv\u003e\n    \u003cbutton onClick={ ()=\u003einput$.next(-1) }\u003e\n      minus\n    \u003c/button\u003e\n\n    { view$ }\n\n    \u003cbutton onClick={ ()=\u003einput$.next( 1) }\u003e\n      plus\n    \u003c/button\u003e\n  \u003c/div\u003e\n}\n```\n\n[online sandbox](https://codesandbox.io/s/recks-example-counter-lw29e?fontsize=14\u0026hidenavigation=1\u0026theme=dark\u0026module=/src/App)\n\n## 📚 Docs\n\nContinue reading:\n\n* \\*\\*\\*\\*[**Installation guide**](https://recks.gitbook.io/recks/install)\\*\\*\\*\\*\n* [Lifecycle](https://recks.gitbook.io/recks/api/lifecycle)\n* [Events](https://recks.gitbook.io/recks/api/events)\n* [Subcomponents](https://recks.gitbook.io/recks/api/subcomponents)\n* [Lists](https://recks.gitbook.io/recks/api/lists)\n* [DOM references](https://recks.gitbook.io/recks/api/dom-references)\n\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frecksjs%2Frecks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frecksjs%2Frecks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frecksjs%2Frecks/lists"}