Is it possible to determine default 'as' based on options in reakit-system?

[ezhikov]

Hi. I'm fiddling with reakit-system to make my own components and find it pretty intuitive and easy to compose elements this way, but I'm not sure how to tackle the case where default for as prop would be based on provided options.

What I'm trying to do is to make component Heading which accepts level option to apply styles. I'd also like to determine default element from this prop, so if no as was provided from outside, I'd just make it 'h' + level.

Is this case even valid for reakit-system, or should I make wrapping component that will provide as, like this:

export function Heading({as, level, ...props}: PropsOf<typeof SystemHeading>) {
  let type = as || `h${level}`;
  return <SystemHeading level={level} as={type} {...props}/>
}

[diegohaz]

Hi @ezhikov!

Something like this may work: https://codesandbox.io/s/amazing-sea-fiy1g?file=/src/App.js

But since reakit-system is super experimental and will likely change, it's probably better that you come up with your own solution.

[ezhikov]

For some reason I didn't thought of supplying component into createComponent. Thnak you.

I'm aware that reakit-system is experimental and since I'm experimenting myself, it's okay if something will break. Even in current state it's awesome way to build components and reuse their logic.