Suggestions for refactoring Toast component

[unix]

Feature request 🚀

• I will create Pull Request
• It's just a suggestion

Expected

• Add placement prop to Toast
• The height of Toast is no longer restricted
• Render other components within Toast
• Remove animation

Examples

Now the Toast component can only render strings, if we remove some restrictions, we can let Toast render more components, even more functions can be customized.

setToast({ render: () => <Text b>text</Text> })

Programme (Optional)

Now the animation effect can not get the same performance in different positions, like material-ui, I plan to remove some unnecessary animation and add more functionality to the components.

You can see my discussion about animation in #306 . Now I have a proposal to remove animation and add more features, here's the reason to remove animation:

• Toast can be displayed in four corners of the page.
• Faster removal of DOM (regardless of the integrity of the animation, I don't have to keep the elements in the dom).
• If DOM can be removed synchronously, I think Toast can support rendering more other components. (no pref concerns)

I hope to make some changes on the Toast component to make our components more practical. (now Toast's function seems a little crude)

Polls:

Others

Related issues: #306 #312

[unix]

Now I don't have much time to refactor it, this feature may be delayed for a while, but don't worry, this feature is definitely going to be refactored.

[laurinenas]

Just to add to your point , we probably want to be able to style and scale the elements too. Now if the rest of application is scaled, the buttons in toast may look outsized.

[unix]

@laurinenas
Based on the implementation of #708 , we can now customize the template(ReactNode) and query and call instances of Toast in the user's component. So, the scaling issue can be solved.

const { setToast, findToastOneByID } = useToast()

const myHandler = () => {
  const toast = findToastOneByID('test')
  if (!toast) return
  toast.cancel()
}

setToast({
  id: 'test'
  text: <MyButton scale={0.1}>cancel</MyButton>
})

[unix]

Implemented in version 2.3.0