Ability to pass `position` to `toast`

[justin22]

Is your feature request related to a problem? Please describe. Currently toast position is handled at Toast component. This prevents us having toast at different positions based on the toast context. For example, certain toast I would want in left bottom and some others on the bottom-center.

Describe the solution you'd like

• Keep a default position in the Toast component.
• while using toast hook, accept a positionprop.

<Button
  onClick={() => {
    toast({
      title: "Toast title",
      position: 'top-right',
    });
  }}
>
 Show Toast
</Button>

[tmbalagan]

Hi @akzhysparrow

The position can only be handled in the <Toastr> component because it includes <StyledViewport /> with position styles. We cannot achieve this by passing position props to the toast hook. Please correct me if I'm wrong.

I've implemented a component with two tabs (using twigs-react). Clicking the button on each tab triggers a toast notification and sets the position of the toast. The position is stored in the component's state and passed as a prop to the Toastr component. Is this what you were expecting?

const [position, setPostion] = React.useState("bottom-left");

const handleTabOne = () => {
  toast({
    variant: "default",
    title: "Default message",
    description: "There was a problem with your request.",
  });
  setPostion("top-left");
};

const handleTabTwo = () => {
  toast({
    variant: "default",
    title: "Default message",
    description: "There was a problem with your request.",
  });
  setPostion("top-right");
};

return (
  <div className="App">
    <Tabs defaultValue="tab1">
      <TabsList aria-label="tabs example">
        <TabsTrigger value="tab1"> One </TabsTrigger>
        <TabsTrigger value="tab2"> Two </TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">
        <Toastr duration={1000} position={position} />
        <Button onClick={handleTabOne}>Tab One </Button>
      </TabsContent>
      <TabsContent value="tab2">
        <Toastr duration={1000} position={position} />
        <Button onClick={handleTabTwo}>Tab Two</Button>
      </TabsContent>
    </Tabs>
  </div>
);

[akzhysparrow]

Hey @tmbalagan, thanks for looking into this, you are right, the position is handled inside the StyledViewport. To properly add the position property to the hook, the styles have to be moved to individual toast items.

[tmbalagan]

@akzhysparrow

Thank you for your suggestion regarding the toast hook. I passed the position prop to the toast hook and moved the position items to <StyledToast>, which worked partially. However, the toasts are stacking behind each other instead of on top.

I believe using a <StyledViewport> might be the best solution for managing the position prop. Please share your thoughts on this