https://github.com/frintjs/frint-props
Compose reactive props in FrintJS applications
https://github.com/frintjs/frint-props
frintjs javascript rxjs
Last synced: about 1 year ago
JSON representation
Compose reactive props in FrintJS applications
- Host: GitHub
- URL: https://github.com/frintjs/frint-props
- Owner: frintjs
- License: mit
- Created: 2017-12-29T12:21:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-05-25T00:41:38.000Z (about 6 years ago)
- Last Synced: 2025-04-18T04:56:06.364Z (about 1 year ago)
- Topics: frintjs, javascript, rxjs
- Language: JavaScript
- Homepage: https://frint.js.org
- Size: 195 KB
- Stars: 12
- Watchers: 6
- Forks: 1
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# frint-props
[](https://www.npmjs.com/package/frint-props)
[](http://travis-ci.org/frintjs/frint-props)
[](https://codecov.io/gh/frintjs/frint-props)
[](https://nodesecurity.io/orgs/travix-international-bv/projects/a1b03b99-d210-41f8-88c5-44313d27ab6f)
[](https://gitter.im/frintjs/frint)
[](https://greenkeeper.io/)
> Library for composing props reactively in FrintJS Apps
## Packages
* [`frint-props`](./packages/frint-props): Compose props as an RxJS Observable
* [`frint-props-react`](./packages/frint-props-react): React higher-order component for working with props
## Guide
### Installation
Install [`frint-props`](./packages/frint-props) with `npm`:
```
$ npm install --save frint-props rxjs
```
### Basic usage
A basic stream of props can be created as follows:
```js
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:
```js
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`](./packages/frint-props-react):
```js
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
;
}
export default compose(
withDefaults({ counter: 0 }),
withState('counter', 'setCounter', 0)
)(MyComponent);
```
If you want to be more flexible by using the [`observe`](https://frint.js.org/guides/higher-order-components/) higher-order component from [`frint-react`](https://frint.js.org/docs/packages/frint-react/) directly, you can do this instead:
```js
import React from 'react';
import { observe } from 'frint-react';
import { compose, withDefaults, withState } from 'frint-props';
function MyComponent(props) {
return
;
}
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](https://github.com/acdlite/recompose), but done with RxJS from the ground up and to play nicely with [FrintJS](https://github.com/frintjs/frint) while being agnostic of any specific rendering library.
## License
MIT