fahad19 / proppy

Functional props composition for UI components (React.js & Vue.js)

Home Page:https://proppyjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Consumer used without Provider

konsumer opened this issue · comments

I am using preact (in parcel) and getting this warning whenever I compose an HOC. I apologize, in advance, if this issue belongs in another queue, but it's a bit hard to track down.

Consumer used without Provider

The HOC still works fine, and it's not app-breaking, just hoping I am using it right and (I am new to preact & proppy, coming from recompose and react.)

Here is my 1-file example:

import { h, render } from 'preact'
import { compose, withState, withHandlers } from 'proppy'
import { ProppyProvider, attach } from 'proppy-preact'

const P = compose(
  withState('counter', 'setCounter', 0),
  withHandlers({
    increment: ({ counter, setCounter }) => e => setCounter(counter + 1),
    decrement: ({ counter, setCounter }) => e => setCounter(counter - 1)
  })
)

const PageHome = attach(P)( ({ increment, decrement, counter }) => (
  <div>
    <button onClick={decrement}>-</button>
    {counter}
    <button onClick={increment}>+</button>
  </div>
))

// global app-state
const providers = {
  foo: false,
  bar: true
}

const Index = () => (
  <ProppyProvider providers={providers}>
    <PageHome />
  </ProppyProvider>
)

render(<Index />, document.getElementById('app'))

I'd be happy to put it a quick project git repo, if easier reproduction would help.

@konsumer: you are right. the issue (warning) is reproducible here in the playground too: https://codesandbox.io/s/github/fahad19/proppy/tree/master/examples/preact-playground