Compose reactive props in FrintJS applications
JavaScript Makefile
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
packages
.alexignore
.alexrc
.babelrc
.editorconfig
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
MAINTAINERS.md
Makefile
README.md
lerna.json
package.json

README.md

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