fhook
Functional components with a predictable state, inspired by React-hooks and RxJS. Depeloped with ❤️ TypeScript.
About
RxJS - is very powerful tool for create multithreading applications, but JavaScript not so suitable language for this problem and people with experience in JavaScript can't use RxJS as usually with imperative style, javascript operators, etc.
React Hooks - is new feature of React, which allow to create a difficult logic with multithreading by simple syntax, use only function (without classes). It has some expenses, because for every changing of state, we should call our function again. But javascript is very quickly and not so many applications have so strong requirements to speed (it is really not so critical).
fhook
- is variant of work with observables, use hooks and simple control for execution.
For start our greeting, look this example:
; ;;createSubscriptionapp, ;/*Result: 1Result: 2Result: 3Result: 4Result: 5*/
Install
npm install fhook --save
or
yarn add fhook
Usage
Example 1: Simple counter
;createSubscriptionapp, ;/*Counter: 0Counter: 1Counter: 2Counter: 3Counter: 4...*/
Example 2 Receive and send values
; ; runapp.subscribeconsole.logvalue;/*Number: 9Number: 3Number: 1Number: 4Number: 1*/
Example 3: Complex app
In this example, we run function app
, which provide DelimiterContext
, then it use function one
for return itself value.
Function one
create state name, setName
and for first time use function two
.
Function two
use effect, wait one second and set isReady
to true
, it allow return value Hell
In function one
we check name
for contains a symbol H
and return never
(which stop propagination a value for this function). Same time we change use function two
to three
.
Function three
return to us a value World
concatened with ThemeContext
(Yellow World
).
And now, function one
can return value Hello, Yellow World!
and app
propaginate this value and our subscriber
got it!
; ;; ; subscribe;
API
useContextcontext: Context<T>: T;usePipefn: IFunction<R, A>, args: A, next?:void: symbol;useStatedefaultValue: T: ;useEffectcallback:any, deps?: any: void;withContextcontext: Context<T>, value: T: void; ;
Test
npm install
npm test