{"id":19258779,"url":"https://github.com/frintjs/frint-props","last_synced_at":"2025-04-21T15:31:39.701Z","repository":{"id":57241867,"uuid":"115720316","full_name":"frintjs/frint-props","owner":"frintjs","description":"Compose reactive props in FrintJS applications","archived":false,"fork":false,"pushed_at":"2020-05-25T00:41:38.000Z","size":200,"stargazers_count":12,"open_issues_count":25,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-18T04:56:06.364Z","etag":null,"topics":["frintjs","javascript","rxjs"],"latest_commit_sha":null,"homepage":"https://frint.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frintjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-29T12:21:40.000Z","updated_at":"2019-03-05T03:08:12.000Z","dependencies_parsed_at":"2022-09-07T23:13:15.524Z","dependency_job_id":null,"html_url":"https://github.com/frintjs/frint-props","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frintjs%2Ffrint-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frintjs%2Ffrint-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frintjs%2Ffrint-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frintjs%2Ffrint-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frintjs","download_url":"https://codeload.github.com/frintjs/frint-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250080690,"owners_count":21371548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frintjs","javascript","rxjs"],"created_at":"2024-11-09T19:14:21.277Z","updated_at":"2025-04-21T15:31:39.418Z","avatar_url":"https://github.com/frintjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# frint-props\n\n[![npm](https://img.shields.io/npm/v/frint-props.svg)](https://www.npmjs.com/package/frint-props)\n[![Build Status](https://img.shields.io/travis/frintjs/frint-props/master.svg)](http://travis-ci.org/frintjs/frint-props)\n[![codecov](https://codecov.io/gh/frintjs/frint-props/branch/master/graph/badge.svg)](https://codecov.io/gh/frintjs/frint-props)\n[![NSP Status](https://nodesecurity.io/orgs/travix-international-bv/projects/a1b03b99-d210-41f8-88c5-44313d27ab6f/badge)](https://nodesecurity.io/orgs/travix-international-bv/projects/a1b03b99-d210-41f8-88c5-44313d27ab6f)\n[![Join the chat at https://gitter.im/frintjs/frint](https://badges.gitter.im/frintjs/frint.svg)](https://gitter.im/frintjs/frint)\n[![Greenkeeper](https://badges.greenkeeper.io/frintjs/frint-props.svg)](https://greenkeeper.io/)\n\n\u003e Library for composing props reactively in FrintJS Apps\n\n## Packages\n\n* [`frint-props`](./packages/frint-props): Compose props as an RxJS Observable\n* [`frint-props-react`](./packages/frint-props-react): React higher-order component for working with props\n\n## Guide\n\n### Installation\n\nInstall [`frint-props`](./packages/frint-props) with `npm`:\n\n```\n$ npm install --save frint-props rxjs\n```\n\n### Basic usage\n\nA basic stream of props can be created as follows:\n\n```js\nconst props$ = withState('counter', 'setCounter', 0)();\n```\n\nThe `props$` observable will now emit an object with three keys:\n\n* `counter` (`Integer`): The value of counter\n* `setCounter` (`Function`): Calling `setCounter(n)` will update the counter\n\n### Composition\n\nYou can compose multiple streams together using the `compose` function:\n\n```js\nimport {\n  withDefaults,\n  withState,\n  shouldUpdate,\n  compose\n} from 'frint-props';\n\nconst props$ = compose(\n  withDefaults({ counter: 0 }),\n  withState('counter', 'setCounter', 0),\n  withState('name', 'setName', 'FrintJS'),\n  shouldUpdate((prevProps, nextProps) =\u003e true)\n)();\n```\n\nThe `props$` observable will now emit an object with these keys as they are made available:\n\n* `counter` (`Integer`)\n* `setCounter` (`Function`)\n* `name` (`String`)\n* `setName` (`Function`)\n\n### Usage with React\n\nYou can use [`frint-props-react`](./packages/frint-props-react):\n\n```js\nimport React from 'react';\nimport { withDefaults, withState } from 'frint-props';\nimport { compose } from 'frint-props-react';\n\nfunction MyComponent(props) {\n  // `props.counter` (`Integer`)\n  // `props.setCounter` (`Function`)\n  return \u003cp\u003e\u003c/p\u003e;\n}\n\nexport default compose(\n  withDefaults({ counter: 0 }),\n  withState('counter', 'setCounter', 0)\n)(MyComponent);\n```\n\nIf 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:\n\n```js\nimport React from 'react';\nimport { observe } from 'frint-react';\nimport { compose, withDefaults, withState } from 'frint-props';\n\nfunction MyComponent(props) {\n  return \u003cp\u003e\u003c/p\u003e;\n}\n\nexport default observe(function (app, parentProps$) {\n  return compose(\n    withDefaults({ counter: 0 }),\n    withState('counter', 'setCounter', 0)\n  )(app, parentProps$);\n});\n```\n\n## Note\n\nThe `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.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrintjs%2Ffrint-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrintjs%2Ffrint-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrintjs%2Ffrint-props/lists"}