proppy-vue

React integration package for ProppyJS

• Guide
  • Installation
  • Usage
• API
  • attach

---

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.