Reactive X Component
Creates a React Component that uses RxJS as State management.
Install
yarn add reactive-x-component
npm i --save reactive-x-component
Demo in Stackblitz
Example Project - Snap Game
Usage
; // simple wrap your ComponentType using the function and it will start accepting Observables;
Examples
Test.tsx
;;;; ; ;
Example.tsx
;;;;; ; ;
API
ReactiveXComponent
ReactiveXComponentstaticProps, defaultValuescomponentType, options
Attribute | Default | Description |
---|---|---|
staticProps |
{} |
An object with values of Observables<any> which will be passed into the components props |
defaultValues |
undefined |
A Partial<StaticProps> which is the initial state value for these observables |
componentType |
Required | A ComponentType<any> . Can be either a FunctionComponent or ComponentClass |
options |
undefined |
Used for debugging purposes only at this stage. You can specify a name to prefix the debug log |
Returns a component with props as Observable<T> | T
and also optional Subscriber<T>
for public observable attributes.
FAQ
How does it work?
This ReactiveXComponent does two things:
- Flattens each
Observable
prop and passes their values to the child component. (Only if the prop is anObservable
)
// Flattens the interval into its value and passes it directly to the component.
- Passes
function
s orSubscriber
s from props into the child component publicObservable
property (if it exists).
public readonly eventEmitter$ = new Subject; // passes them into something like this
When does it subscribe?
Each Observable is subscribed to on componentDidMount
or when it is passed in as a prop.
When does it unsubscribe?
All observables are unsubscribed on componentWillUnmount
or when the value changes.