proppy-vue

npm

React integration package for ProppyJS

Guide

Installation

With npm:

$ npm install --save proppy vue proppy-vue

Via unpkg CDN:

<script src="https://unpkg.com/proppy@latest/dist/proppy.min.js"></script>
<script src="https://unpkg.com/proppy-vue@latest/dist/proppy-vue.min.js"></script>

<script>
  // available as `window.ProppyVue`
</script>

Usage

Render your Vue.js app with providers data:

// index.js
import Vue from 'vue';

import MyComponent from './components/MyComponent';

const providers = {
  foo: 'foo value',
};

const app = new Vue({
  provide: {
    proppy: providers,
  },

  render(h) {
    return <MyComponent />;
  },
});

Now anywhere from your components tree, you can use the attach higher-order component:

// components/MyComponent.js
import { compose, withProps } from 'proppy';
import { attach } from 'proppy-vue';

const P = compose(
  withProps((props, providers) => ({
    foo: providers.foo,
  })),
  withProps({ bar: 'bar value' }),
);

const MyComponent = {
  name: 'MyComponent',

  props: ['foo', 'bar'],

  render(h) {
    const { foo, bar } = this;

    return <p></p>;
  },
};

export default attach(P)(MyComponent);

API

attach

attach(P)(Component)

Higher-order component for attaching your Proppy factory to your Component.