[toast] typeof `toast.action`
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
I've been exploring the `Toast` component and noticed that the action button is currently configured via `toast.actionProps` as an object.
While this approach works, it feels slightly different from the typical declarative patterns we use in React. Since `actionProps` relies on a configuration object, it might be a bit restrictive when developers want to use their own custom components or need full control over the rendered output.
Also, considering that `title` and `description` accept `ReactNode`, using an object for `actionProps` seems to create a minor inconsistency in the API interface.
**Describe the solution you'd like**
I would like to propose supporting an **`action`** prop that accepts a `React.ReactNode`.
This would allow developers to pass JSX elements (like ``) directly. This approach aligns well with the "Inversion of Control" principle, giving developers more freedom to style and structure the action area as they see fit.
**Code Comparison**
**Current (Config-based):**
```tsx
toastManager.add({
title: 'Action performed',
actionProps: {
children: 'Undo',
onClick: handleUndo,
},
});
```
**Proposed (JSX-based):**
```tsx
toastManager.add({
title: 'Action performed',
action: (
Undo
),
});
```
I'd love to hear the team's thoughts on this. If you agree with this direction, I would be happy to contribute by working on a PR.
Contributor guide
Assessment
This issue has not been assessed yet.