ProppyJS: Functional props composition for components (supports ReactJS & VueJS)

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		1.5K	Core package
proppy-react		1.0K	React integration
proppy-vue		0.7K	Vue.js integration
proppy-preact		1.1K	Preact integration
proppy-redux		0.6K	Redux integration
proppy-rx		0.6K	RxJS integration

Comparisons

Redux

Redux 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.

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 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