[useRenderer] Add public hook

[mnajdova]

Closes #1315

Added a public useRenderer hook as an simpler adapter that uses the useComponentRenderer hook. I intentionally copied the types, so we make sure we don't break them if we ever change the internal useComponentRenderer hook.

The hooks receives the following settings:

• className
• render
• state
• ref
• props (passed as extraProps)
• styleHookMapping

Documentation page: https://deploy-preview-1418--base-ui.netlify.app/react/utils/use-renderer

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	2a9621f
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/67a62d26db69110008b6cf5b
😎 Deploy Preview	https://deploy-preview-1418--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mj12albert]

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

[mnajdova]

for some reason importing the hook in CSB doesn't work, this works fine locally in a playground though

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

[mj12albert]

I removed only the customStyleHookMapping setting from the original hook

It may be useful to provide a (alternative) way to opt-out individual props placed in state from generating a corresponding data attribute

[mnajdova]

Thanks for the initial review, I updated the API to include:

• className
• render
• state
• ref
• props (passed as extraProps)
• excludedStyleHookStates [string[]] - list of state keys that should not be generated as a styled hooks (data-attributes) - based on these I am creating a customStyleHookMapping that is passed in the internal hook. I've also added usage example under: https://deploy-preview-1418--base-ui.netlify.app/experiments/custom-components

[michaldudak]

I'd leave customStyleHookMapping as in useComponentRenderer. It should be quite common to customize the data attributes (we do this often).

[mnajdova]

I'd leave customStyleHookMapping as in useComponentRenderer. It should be quite common to customize the data attributes (we do this often).

Yeah, fair enough, ok I was thinking initially to make the API simpler. I've changed it back to use the customStyleHookMapping and added a test for it.

[mnajdova]

I've resolved all feedback and added a docs page: https://deploy-preview-1418--base-ui.netlify.app/react/utils/use-renderer

[atomiks]

I'm not the biggest fan of this prop name (styleHookMapping) - not sure if "style hook" is suitable for a public API, and Map instead of Mapping might be better. It's not clear it infers/uses the state object

[mnajdova]

The most clear name would be: stateToDataAttributesMap, to be very explicit, but it's a strange name 😅 @aarongarciah or @colmtuite do you have some suggestions?

[michaldudak]

Yeah, "hook" has a strong different meaning in React world, so we can think of something else. stateAttributes?

[aarongarciah]

stateDataAttributes?

[michaldudak]

Technically, you could create any attribute (including class), so "dataAttributes" is not entirely correct. We just happen to use only data attributes.

[aarongarciah]

I see! stateAttributes makes sense then.

[mnajdova]

Renamed to stateDataAttributes, I am still missing the mapping in it, but people can figure out how to define them by using the type. Maybe it's even worth adding demo about it on the page. What do you think?