Skip to content
Compose reactive props in FrintJS applications
Branch: master
Clone or download
Latest commit 611f54a Mar 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
packages
.alexignore linting fixes. Dec 29, 2017
.alexrc
.babelrc
.editorconfig
.eslintrc
.gitignore Fix for generating minified dists (#22) Jan 7, 2018
.npmignore initial commit. Dec 29, 2017
.travis.yml travis: simplified coverage check. Dec 29, 2017
CHANGELOG.md v0.2.1 changelog Mar 29, 2018
CODE_OF_CONDUCT.md initial commit. Dec 29, 2017
CONTRIBUTING.md
LICENSE initial commit. Dec 29, 2017
MAINTAINERS.md initial commit. Dec 29, 2017
Makefile
README.md
lerna.json v0.2.1 Mar 29, 2018
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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.