National Preventative Mechanism

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

    1.3.1 • Public • Published

    proppy-preact

    npm

    Preact integration package for ProppyJS


    Guide

    Installation

    With npm:

    $ npm install --save proppy preact proppy-preact
    

    Via unpkg CDN:

    <script src="https://unpkg.com/proppy@latest/dist/proppy.min.js"></script>
    <script src="https://unpkg.com/proppy-preact@latest/dist/proppy-preact.min.js"></script>
     
    <script>
      // available as `window.ProppyPreact`
    </script> 

    Usage

    First, setup your root component with providers data:

    // components/Root.js
    import { h } from 'preact';
    import { ProppyProvider } from 'proppy-preact';
     
    import MyComponent from './MyComponent';
     
    const providers = {
      foo: 'foo value',
    };
     
    export default function Root() {
      return (
        <ProppyProvider providers={providers}>
          <MyComponent />
        </ProppyProvider>
      );
    }

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

    // components/MyComponent.js
    import { h } from 'preact';
    import { compose, withProps } from 'proppy';
    import { attach } from 'proppy-preact';
     
    const P = compose(
      withProps((props, providers) => ({
        foo: providers.foo,
      })),
      withProps({ bar: 'bar value' }),
    );
     
    function MyComponent(props) {
      const { foo, bar } = props;
     
      return <p></p>;
    }
     
    export default attach(P)(MyComponent);

    API

    ProppyProvider

    For setting providers at Preact's context-level.

    Example:

    import { h } from 'preact';
    import { ProppyProvider } from 'proppy-preact';
     
    export default function Root() {
      return (
        <ProppyProvider providers={providers}>
          <SomeOtherComponent />
        </ProppyProvider>
      );
    }

    attach

    attach(P)(Component)

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

    Keywords

    Install

    npm i proppy-preact

    DownloadsWeekly Downloads

    6

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    23 kB

    Total Files

    32

    Last publish

    Collaborators

    • fahad19