API

API documentation for all the packages can be found in their own pages:

Factory creators

These functions allow you to compose your factory:

import { compose, withProps, withState } from 'proppy';

const myProviders = {};

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

// instance
const p = P(myProviders);

console.log(p.props);
// {
//   foo: 'foo value',
//   counter: 0,
//   setCounter: Function
// }
Function Package
compose proppy Composes multiple factories
withProps proppy Synchronous props
withState proppy State with setter
withReducer proppy Props via reducer functions
withHandlers proppy Handlers for side effects
withStateHandlers proppy State with handlers
withObservable proppy Props via Observable
withTimer proppy Scheduled async props
onChange proppy Handle prop changes
emit proppy Emit props asynchronously
map proppy Map props
shouldUpdate proppy Lifecycle
didSubscribe proppy Lifecycle
willDestroy proppy Lifecycle
handleReceivedProps proppy Lifecycle
create proppy Creates factory generators
withStore proppy-redux Redux integration
withStream proppy-rx RxJS integration

Provider components

These components help set application-wide providers.

// components/Root.js
import React from 'react';
import { ProppyProvider } from 'proppy-react';

const myProviders = {};

export default function Root() {
  return (
    <ProppyProvider providers={myProviders}>
      <MyOtherComponent />
    </ProppyProvider>
  );
}

// components/Root.js
import { h } from 'preact';
import { ProppyProvider } from 'proppy-preact';

const myProviders = {};

export default function Root() {
  return (
    <ProppyProvider providers={myProviders}>
      <MyOtherComponent />
    </ProppyProvider>
  );
}

// components/Root.js
const myProviders = {};

export default {
  provide: {
    proppy: myProviders
  },

  render(h) {
    return <MyOtherComponent />;
  }
};

Vue.js doesn't require this since you can use their provide/inject API. See proppy-vue for more info.

Component Package
ProppyProvider proppy-react React.js integration
ProppyProvider proppy-preact Preact integration

Higher-order components

These functions are used to connect your ProppyJS factory to your Components:

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>Counter: {counter}</p>

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

export default attach(P)(MyComponent);

import { h } from 'preact';
import { compose, withProps, withState } from 'proppy';
import { attach } from 'proppy-preact';

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

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

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

export default attach(P)(MyComponent);

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

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

const MyComponent = {
  props: ['foo', 'counter', 'setCounter'],

  render(h) {
    return (
      <div>
        <p>Counter: {counter}</p>

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

export default attach(P)(MyComponent);
HoC Package
attach proppy-react React.js integration
attach proppy-vue Vue.js integration
attach proppy-preact Preact integration