frint-props

Library for composing props reactively in FrintJS Apps

Packages

• frint-props: Compose props as an RxJS Observable
• frint-props-react: React higher-order component for working with props

Guide

Installation

Install frint-props with npm:

$ npm install --save frint-props rxjs

Basic usage

A basic stream of props can be created as follows:

const props$ = withState('counter', 'setCounter', 0)();

The props$ observable will now emit an object with three keys:

• counter (Integer): The value of counter
• setCounter (Function): Calling setCounter(n) will update the counter

Composition

You can compose multiple streams together using the compose function:

import {
  withDefaults,
  withState,
  shouldUpdate,
  compose
} from 'frint-props';

const props$ = compose(
  withDefaults({ counter: 0 }),
  withState('counter', 'setCounter', 0),
  withState('name', 'setName', 'FrintJS'),
  shouldUpdate((prevProps, nextProps) => true)
)();

The props$ observable will now emit an object with these keys as they are made available:

• counter (Integer)
• setCounter (Function)
• name (String)
• setName (Function)

Usage with React

You can use frint-props-react:

import React from 'react';
import { withDefaults, withState } from 'frint-props';
import { compose } from 'frint-props-react';

function MyComponent(props) {
  // `props.counter` (`Integer`)
  // `props.setCounter` (`Function`)
  return <p></p>;
}

export default compose(
  withDefaults({ counter: 0 }),
  withState('counter', 'setCounter', 0)
)(MyComponent);

If you want to be more flexible by using the observe higher-order component from frint-react directly, you can do this instead:

import React from 'react';
import { observe } from 'frint-react';
import { compose, withDefaults, withState } from 'frint-props';

function MyComponent(props) {
  return <p></p>;
}

export default observe(function (app, parentProps$) {
  return compose(
    withDefaults({ counter: 0 }),
    withState('counter', 'setCounter', 0)
  )(app, parentProps$);
});

Note

The frint-props package's API is highly inspired by the awesome Recompose, but done with RxJS from the ground up and to play nicely with FrintJS while being agnostic of any specific rendering library.

License

MIT