useToast
A hook that makes it possible to add more than one Toast, to remove one or more of them, and to clear them all.
Import
import { useToast } from '@resultadosdigitais/tangram-components'
Returns
resources
| Type | Object |
|---|
Description
An object with useful properties for controlling the state of a Toast component and its associated items.
resources.addToast
| Type | Function |
|---|---|
| Param | props.delaynumber- Sets the number of milliseconds to wait before automatically calling the onClose function. onClose should be passed by props. |
| Param | props.titlestring- Sets the title. The function useToast receives an empty object. In order to use it, you must provide the title and message props. |
| Param | props.messagestring | node- Sets if the Toast content will be customizable. The function useToast receives an empty object. In order to use it, you must provide the title and message props. |
| Param | props.sizeToast.sizes.SM | Toast.sizes.MD- Sets the font size. The default value for this property is Toast.sizes.SM |
| Param | props.kindToast.kinds.default | Toast.kinds.primary | Toast.kinds.success | Toast.kinds.danger | Toast.kinds.warning | Toast.kinds.help- Sets the kind for styling. The default value for this property is Toast.kinds.default |
| Param | props.onClosefunction- Callback fired when the Toast closure is requested. |
| Param | props.onRemovedfunction- Callback fired after the Toast is closed. |
| Param | props.irremovablebool- If true, the close button will be hidden. The default value for this property is false. |
Description
Add a new toast above the former one.
resources.removeToast
| Type | Function |
|---|---|
| Param | keyString | Number- Toast identificator. You should inform the key from the Toasts array. |
Description
Remove an indicated toast.
resources.clean
resources.toasts
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.