Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@chakra-ui/toast
Advanced tools
Readme
The toast is used to show alerts on top of an overlay.
The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds.
Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time.
import useToast from "@chakra-ui/toast"
function ToastExample() {
const toast = useToast()
return (
<Button
onClick={() =>
toast({
title: "Account created.",
description: "We've created your account for you.",
status: "success",
duration: 9000,
isClosable: true,
})
}
>
Show Toast
</Button>
)
}
By default, all the toasts will be positioned on the top-right
of your
browser.
The following values are allowed: top-right, top, top-left, bottom-right, bottom, bottom-left
import * as React from "react"
import useToast from "@chakra-ui/toast"
const Position = () => {
const toast = useToast()
const notify = () => {
toast({ title: "Success Notification !", status: "success" })
}
return <button onClick={notify}>Notify</button>
}
To change the show delay for any toast, simply pass the duration
prop when
invoking the toast
function.
Note 🚨: If you pass
null
as the duration, the toast will always remain on screen.
import * as React from "react"
import useToast from "@chakra-ui/toast"
const Duration = () => {
const toast = useToast()
const notify = () => {
toast({
duration: 5000,
title: "I will close after 5 secs",
})
}
return <button onClick={notify}>Notify</button>
}
Display a custom component instead of the default Toast UI.
We provide 2 key props
to your component, id
, and onClose
to close the
toast (to build your custom close button).
function Example() {
const toast = useToast()
return (
<Button
onClick={() => {
toast({
position: "bottom-left",
render: (props) => (
<Box m={3} color="white" p={3} bg="blue.500">
Hello World
</Box>
),
})
}}
>
Show Toast
</Button>
)
}
A custom id
can be used to replace the one internal auto-generated toast id
.
You can use a number
or a string
.
This is mostly useful when you need to prevent duplication of a specific toast.
To prevent duplicates, you can check if a given toast is active by calling
toast.isActive(id)
like the snippet below. Or, you can use a custom toastId
:
import * as React from "react"
import useToast from "@chakra-ui/toast"
const Example = () => {
const toast = useToast()
const id = "login-toast"
const notify = () => {
if (!toast.isActive(id)) {
toast({ title: "Dude! I cannot be duplicated" })
}
}
return (
<div>
<button onClick={notify}>Notify</button>
</div>
)
}
When you update a toast, the toast options and the content are inherited but don't worry you can update them.
import * as React from "react"
import useToast from "@chakra-ui/toast"
const Update = () => {
const toast = useToast()
const id = React.useRef(null)
const notify = () => {
id.current = toast({
title: "Chidori is not available!",
duration: null,
})
}
const update = () => {
toast.update(id.current, {
title: "Sharingan is all you have!",
status: "success",
duration: 5000,
})
}
return (
<div>
<button onClick={notify}>Notify</button>
<button onClick={update}>Update</button>
</div>
)
}
FAQs
description
The npm package @chakra-ui/toast receives a total of 532,890 weekly downloads. As such, @chakra-ui/toast popularity was classified as popular.
We found that @chakra-ui/toast demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.