Using Radix UI props does not work in React JS application

Asking 0
Viewed 45

In my react Js application i am using Radix. I need to customizze toast component changing the position where the component should appear.

For this, the API provides the next way:

<ToastProvider swipeDirection="up">

So swipeDirection is responsible for this.
ISSUE: Using the above changes, the component stil appear at the bottom even with changed prop.
Question: How to make the component to appear at the top and why the prop does not work?
demo: https://codesandbox.io/s/z688kv?module=App.js&file=/App.js:3909-3944

radix reactjs javascript
2 Answers

Sadly there is no "position" prop out of the box for this component. The swipeDirection="up" prop only specify that you can delete a toast by swiping it to the top. You can still specify where to place the toasts with pure css. Just update the styles of the ToastViewport component.

Default styles are:

position: fixed;
bottom: 0px;
right: 0px;

So to have the toasts in the top right corner for example just use:

<ToastViewport style={{ top: "0px" }} />

Edit dreamy-fermat-gr5vcj

johannchopin0

Adding on @johannchopin answer, if you want to position the toast to the left-bottom for example.

First, some changes to the slideIn animation:

const slideIn = keyframes({
  from: { transform: `translateX(calc(-100% + ${VIEWPORT_PADDING}px))` },
  to: { transform: "translateX(0)" }
});

const swipeOut = keyframes({
  from: { transform: "translateX(var(--radix-toast-swipe-move-y))" },
  to: { transform: `translateX(calc(-100% + ${VIEWPORT_PADDING}px))` }
});

notice the use of -100% instead of 100%

and a small change to the StyledViewport default position:

const StyledViewport = styled(ToastPrimitive.Viewport, {
  position: "fixed",
  bottom: 0,
  left: 0,
  //other styles removed to keep the code short
});

Edit dreamy-fermat-gr5vcj

mocherfaoui0
Related