Extending component state when using primitives powered by useRender?
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
Hi! 👋
I’m wondering whether there’s currently a way to extend the state for components that use `useRender` under the hood.
I can add custom state when calling `useRender` directly, like this:
```tsx
import { useRender } from '@base-ui-components/react/use-render';
export namespace Button {
export interface State extends Record {
isPressed: boolean;
}
export interface Props extends useRender.ComponentProps<'button', Button.State> {}
}
export function Button({ render = , ...props }: Button.Props) {
// ... press logic, redacted to keep the repro simple
const isPressed = true;
return useRender({
state: {
isPressed,
},
render,
stateAttributesMapping: { isPressed: (value) => (value ? { 'data-pressed': '' } : null) },
props,
});
}
```
However, when using a primitive that already relies on `useRender`, it seems there’s no way to provide additional state:
```tsx
import { Button as ButtonPrimitive } from "@base-ui-components/react/button";
export function Button({ ...props }: ButtonPrimitive.Props) {
// ... press logic, redacted to keep the repro simple
const isPressed = true;
return (
);
}
```
This works, but we lose the ability to declare additional state in a structured way, as we do when calling useRender directly.
## Question
Is there anything planned to support extending state on top of primitives that use `useRender` internally?
Maybe `data-*` attributes could be derived from the returned state the same way `useRender` maps state to attributes?
Thanks!
Contributor guide
Assessment
This issue has not been assessed yet.