ProppyJS

Tiny 1.5kB utility library enabling

Functional props composition for components

Learn more Quick start

Flow of props

Various sources

  • Redux

    Redux

  • JavaScript

    JavaScript

  • RxJS

    RxJS

Compose as props

ProppyJS

Proppy

Pass to any Component

  • React

    React

  • Vue

    Vue.js

  • Preact

    Preact

Examples

import React from 'react';
import { compose, withProps, withState } from 'proppy';
import { attach } from 'proppy-react';

const P = compose(
  withProps({ foo: 'foo value' }),
  withState('counter', 'setCounter', 0)
);

function MyComponent({ foo, counter, setCounter }) {
  return (
    <div>
      <p>Foo: {foo}</p>

      <p>Counter: {counter}</p>

      <button onClick={() => setCounter(counter + 1)}>
        Increment
      </button>
    </div>
  );
}

export default attach(P)(MyComponent);

See detailed example here.

Benefits

Stateless

Your component layer ends up becoming stateless, and only responsible for accepting props and rendering them.

Interoperable

Integrating other libraries to your components layer becomes a breeze with the suite of functions that Proppy provides you.

Functional

With your props being composed in functions, they become easier to expand as your requirements grow.

Testing

With clear separation between props generation and components, you can now unit test them separately with ease.

Providers

With Proppy's providers, you can set application-wide global object accessible anywhere in your components tree.

Freedom

Since Proppy connects to your favourite UI rendering library, you have the freedom to switch with minimal effort.

Sounds good? Let's get started!