mui / mui/base-ui

Extending component state when using primitives powered by useRender?

Open
#3,258 2 comments 2 reactions 0 assignees View on GitHub
scope: all components
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.