[useRenderer] Add public hook #1418
Conversation
mnajdova
requested review from
atomiks,
colmtuite and
michaldudak
as code owners
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Nice ~ I imagine the use-case is something like this: https://codesandbox.io/p/sandbox/flamboyant-fog-9x266p?file=%2Fsrc%2FApp.tsx%3A29%2C63
(for some reason importing the hook in CSB doesn't work, this works fine locally in a playground though)
This feels more intuitive to me (biased though because I never used asChild extensively) to use than a Slot component
I haven't updated the exports field, will fix it. Here is the updated sandbox: https://codesandbox.io/p/sandbox/exciting-paper-9x266p-use-renderer-forked-ry269y?file=%2Fpackage.json |
| * A function that returns props for the rendered element. | ||
| * It should accept and merge additional props. | ||
| */ | ||
| propGetter?: ( |
There was a problem hiding this comment.
IMO propGetter is pretty specific to our setup, where we have hooks with logic and components using them.
It may be useful to provide a (alternative) way to opt-out individual props placed in state from generating a corresponding data attribute |
| /** | ||
| * Additional props to be spread on the rendered element. | ||
| */ | ||
| extraProps?: Record<string, any>; |
There was a problem hiding this comment.
This could possibly just be the top-level object props (along with removing propGetter)
Added a public
useRendererhook as an simpler adapter that uses theuseComponentRendererhook. Let me know if this is what we want, and if we agree I will add a documentation for it.I intentionally copied the types, so we make sure we don't break them if we ever change the internal
useComponentRendererhook. I removed only thecustomStyleHookMappingsetting from the original hook.Example usage: https://codesandbox.io/p/sandbox/exciting-paper-9x266p-use-renderer-forked-ry269y?file=%2Fpackage.json (thanks Albert for creating it :))