proppy-vue
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    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.

    Keywords

    Install

    npm i proppy-vue

    DownloadsWeekly Downloads

    4

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    27.1 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar