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

    0.1.0 • Public • Published

    Functional, Reactive React Components

    Look ma, no state!

    npm Build Status npm

    Why?

    React has a way to define components as a function Props → λ → JSX Element. The problem is, it doesn't work for any type of advanced component that needs to do asynchronous requests, handle events etc. Coincidently, these types of componets are the ones that would benefit the most from a functional definition instead of setState() everywhere. It is possible to achieve that with RxJS, but you have to use the React class syntax, which means you still need state in your component to tell the render() method what to render, need to manage subscriptions, convert React lifecycle hooks in cumbersome ways.

    rx-component allows you to express your component as that single, functional render pipeline Props → λ → JSX Element while still being able to do asynchronous requests, handle events, everything you can do with React class syntax. No mutable state to manage, no bugs with asynchronous setState, clear data flow. You have full control over when to render, without having to implement any class methods.

    Example

    See it in action

    import reactive from 'rx-component'
    import { Subject } from 'rxjs'
     
    export const Counter = reactive(() => {
     
        const increments = new Subject()
        const nextIncrement = e => increments.next(e)
     
        const decrements = new Subject()
        const nextDecrement = e => decrements.next(e)
     
        return Observable.merge(
            increments.mapTo(1),
            decrements.mapTo(-1)
        )
            .startWith(0)
            .scan((count, change) => count + change, 0)
            .map(count =>
                <div>
                    {count}
                    <button onClick={nextIncrement}>Increment</button>
                    <button onClick={nextDecrement}>Decrement</button>
                </div>
            )
    })

    Hack on examples

    npm run examples fires up a local development server that serves the examples and opens a browser.

    Comparison to other libraries

    • xreact Not plain RxJS, introduces more complex concepts like "intents"
    • react-rx-component Only maps Props → State and separates the render.
    • rx-react Allows you to define your state with rxjs with getStateStream(), but not get rid of state completely.
    • react-rx Requires you to create external stores
    • reaxjs More complex, takes eventToValues, observablesFactory and PureComponent

    Keywords

    none

    Install

    npm i rx-component

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    16.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • felixfbecker