Skip to content

Compose reactive props in FrintJS applications

License

Notifications You must be signed in to change notification settings

frintjs/frint-props

Repository files navigation

frint-props

npm Build Status codecov NSP Status Join the chat at https://gitter.im/frintjs/frint Greenkeeper

Library for composing props reactively in FrintJS Apps

Packages

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