Allow 'as' property to be Polymorphic (to play with libraries like Framer Motion)

[gorkamolero]

Is your feature request related to a problem? Please describe.
I have a problem where layout needs to be animated. CSS transitions won't cut it.

Describe the solution you'd like
If it's possible to allow the AS prop to be polymorphic, and allow for element binding, it could work (for an example, react-styled-flex)

[Gibbo3771]

@gorkamolero This sounds pretty good, how do you imagine this would look?

<Viewport as={MyCustomComponent} ></Viewport>

Or would it be so ref could be given?

[gorkamolero]

Exactly like that! El jue., 19 ago. 2021 11:57, Stephen Gibson ***@***.***> escribió:

…

@gorkamolero <https://github.com/gorkamolero> This sounds pretty good, how do you imagine this would look? <Viewport as={MyCustomComponent} ></Viewport> Or would it be so ref could be given? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#89 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHV2ELNG5OJUPTBEZUCGUDT5TIQHANCNFSM47BIMKWA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[Gibbo3771]

In it's simplest form this is a typing issue. However, if you're looking to pass a component like so:

<Viewport as={<MyCustomComponent someProp={someValue} />} ></Viewport>

Then this would need quite a bit more work as this would to be handled as a special case, and cloning would have to occur.

I've opened a PR for this.

[gorkamolero]

I think the first version is more than enough for the purpose. React-styled-flex also accepts HTML5 tags, that's very useful too (as={header}). El jue, 19 ago 2021 a las 13:57, Stephen Gibson ***@***.***>) escribió:

…

In it's simplest form this is a typing issue. However, if you're looking to pass a component like so: <Viewport as={<MyCustomComponent someProp={someValue} />} ></Viewport> Then this would need quite a bit more work as this would to be handled as a special case, and cloning would have to occur. I've opened a PR for this. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#89 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHV2EKDM64FE3L44WHJXDTT5TWUHANCNFSM47BIMKWA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

-- Gorka Molero

_____________ 👾gorka.space 🐉qtzl.space ***@***.*** <https://twitter.com/gorkamolero>

[aeagle]

Including changes from #99 in upcoming release

[aeagle]

Prepping function in #103

[aeagle]

Functionality has now been released in v0.3.0

[gorkamolero]

Fantastic! El mié, 17 nov 2021 a las 16:44, Allan Eagle ***@***.***>) escribió:

…

Functionality has now been released in v0.3.0 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#89 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHV2EP46FTYEGMDPZT4KQTUMPEXNANCNFSM47BIMKWA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

-- Gorka Molero

_____________ 🐉 qtzl.space 🦉 @gorka <https://twitter.com/gorka> 📷 @gorkolas <https://instagram.com/gorkolas>