ProppyJS: Functional props composition for components (supports ReactJS & VueJS)
Tags: javascript, react, vue, rxjs
Published: 2018-06-06 10:22:02

---
title: ProppyJS: Functional props composition for components (supports ReactJS & VueJS)
published: true
description: Tiny 1.5kB JavaScript library for composing props targeting various rendering libraries, like ReactJS & VueJS. Supports integration with Redux and RxJS too.
tags: javascript, react, vue, rxjs
---


[![ProppyJS](https://thepracticaldev.s3.amazonaws.com/i/77olh04rr9x0599xo3nx.png)](https://proppyjs.com)


ProppyJS is a tiny `1.5kB` JavaScript library for composing props (object that components receive to render themselves).

The generated props can then be used in your favourite components-based UI framework (like React or Vue.js).

## Overview

- Lifts the logic one level above components
- Gives access to application-wide dependencies (like Redux store, config, etc) anywhere in components tree
- Clear separation of logic and presentation layer
- Your components become stateless
- Easier to unit test
- Connects to any UI Component library (React, Preact, and Vue.js supported)
- Interoperability with other libraries (Redux and RxJS integrations)
- Small footprint spread across separate packages focusing on one thing only


## Links

- Documentation: https://proppyjs.com/docs/introduction
- API: https://proppyjs.com/docs/api
- Quickstart: https://proppyjs.com/docs/quickstart
- Examples: https://proppyjs.com/docs/examples/react-counter/

## Packages

| Package              | Status                                                     | Size    | Description               |
|----------------------|------------------------------------------------------------|---------|---------------------------|
| [proppy]             | [![proppy-status]][proppy-package]                         | `1.5K`  | Core package              |
| [proppy-react]       | [![proppy-react-status]][proppy-react-package]             | `1.0K`  | React integration         |
| [proppy-vue]         | [![proppy-vue-status]][proppy-vue-package]                 | `0.7K`  | Vue.js integration        |
| [proppy-preact]      | [![proppy-preact-status]][proppy-preact-package]           | `1.1K`  | Preact integration        |
| [proppy-redux]       | [![proppy-redux-status]][proppy-redux-package]             | `0.6K`  | Redux integration         |
| [proppy-rx]          | [![proppy-rx-status]][proppy-rx-package]                   | `0.6K`  | RxJS integration          |

[proppy]: https://proppyjs.com/docs/packages/proppy
[proppy-react]: https://proppyjs.com/docs/packages/proppy-react
[proppy-vue]: https://proppyjs.com/docs/packages/proppy-vue
[proppy-preact]: https://proppyjs.com/docs/packages/proppy-preact
[proppy-redux]: https://proppyjs.com/docs/packages/proppy-redux
[proppy-rx]: https://proppyjs.com/docs/packages/proppy-rx
[proppy-frint-react]: https://proppyjs.com/docs/packages/proppy-frint-react

[proppy-status]: https://img.shields.io/npm/v/proppy.svg
[proppy-react-status]: https://img.shields.io/npm/v/proppy-react.svg
[proppy-vue-status]: https://img.shields.io/npm/v/proppy-vue.svg
[proppy-preact-status]: https://img.shields.io/npm/v/proppy-preact.svg
[proppy-redux-status]: https://img.shields.io/npm/v/proppy-redux.svg
[proppy-rx-status]: https://img.shields.io/npm/v/proppy-rx.svg
[proppy-frint-react-status]: https://img.shields.io/npm/v/proppy-frint-react.svg

[proppy-package]: https://npmjs.com/package/proppy
[proppy-react-package]: https://npmjs.com/package/proppy-react
[proppy-vue-package]: https://npmjs.com/package/proppy-vue
[proppy-preact-package]: https://npmjs.com/package/proppy-preact
[proppy-redux-package]: https://npmjs.com/package/proppy-redux
[proppy-rx-package]: https://npmjs.com/package/proppy-rx
[proppy-frint-react-package]: https://npmjs.com/package/proppy-frint-react

## Comparisons

### Redux

[Redux](https://redux.js.org) is meant for state management for your whole application, based on actions and reducers.

Proppy is aimed at lifting the logic one level above your Components, and only deal with the behaviour of their props.

While `react-redux` allows you to access your single Store from anywhere in the components tree, Proppy allows you to access [providers](https://proppyjs.com/docs/providers).

And the Redux store, for example, can be one of the providers here.

Proppy is unopinionated about what you use for your application's state management, and doesn't lock you in to any specific state management or rendering library.


### recompose

[recompose](https://github.com/acdlite/recompose) has been the original inspiration for building ProppyJS.

A few key differences:

- Not tied to any rendering libraries (like React or Vue.js)
- Allows access to application-wide dependencies (like Redux store, config, etc)
- Deals with only props generation
- Doesn’t create a new component in tree per function