Support the "as" prop to change the wrapper #614
Conversation
src/index.tsx
Outdated
| @@ -77,6 +77,7 @@ export type ResizeStartCallback = ( | |||
| ) => void | boolean; | |||
|
|
|||
| export interface ResizableProps { | |||
| as: any; | |||
There was a problem hiding this comment.
I tried using string | React.ComponentType instead of any here but I faced a typing issue in the "ref" prop as a consequence and I was not able to solve it otherwise.
There was a problem hiding this comment.
@youknowriad Thanks for your work :)
Could you please specify HTMLElement name like following.
as: 'div' | 'header' | ...| React.ComponentType<any>;
This is because we need to ban elements that don't have children (i.e. input)
And please replace HTMLDivElement to HTMLElement
There was a problem hiding this comment.
If you are ok could you please add story and testcase with as?
And please fix README.md too.
There was a problem hiding this comment.
Thanks for the review, I added a story and a testcase and replaced HTMLDivElement.
I've used string | React.ComponentType<any>; as a type. is that ok? The list of elements can be long :).
Let me know what's missing thanks.
|
@youknowriad v6.4.0 published 🎉 |
|
@bokuweb Perfect, thanks for the quick npm release :) |
Specifically to support "as" from bokuweb/re-resizable#614
* Use light block DOM for the Media & Text block * Update re-resizable dependency Specifically to support "as" from bokuweb/re-resizable#614
In Gutenberg, we have this use-case where we want to control the DOM precisely (to match between the frontend and the editor), and for one of these components we're using Resizable as a wrapper but "div" is not always the right element we want to use there.
We have this particular use-case in a lot of places in our code base and in general we rely on a "as" prop to do so. Other react libraries also use this technique (example Reakit).
I don't know if you're interested by adding the same prop but In this PR I added support for it.
What do you think?