React Components can't be used as placeholders

[anjopater]

Nice library!

I'm trying to render other component as a placeholder using the placeholder prop, and I'm I tested pass a class component or stateless component but it's throwing this error
index.js:2178 uncaught at fetch Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of t.

So how I should use this prop?

Also If I try to pass the component as placeholder={<MyComponent />}
I'm getting this

index.js:2178 uncaught at fetch TypeError: this.placeholder.getBoundingClientRect is not a function

[Aljullu]

Thanks for reporting this!

You are right, the current implementation only allows placeholders which are DOM elements but not React components (actually, the README gives the wrong information, here).

So, something like placeholder={<div>Hellow world</div>} works but something like placeholder={<HelloWorld />} doesn't.

I created a quick fix here #8. I will need some time to test it in different projects before updating the NPM package. If you urgently need it, you can just clone this branch: react-class-as-placeholder and use it from there (and feel free to report any issues you encounter 🙂 ).

Oh, by the way, in the code you will have to use the second way to pass the component. So, instead of:

placeholder={MyComponent} />

you have to use:

placeholder={<MyComponent />} />

[Aljullu]

I've just published version 1.1.4, which should fix this issue.

Doing npm update in your project should be enough. 🙂