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.
@mccsoft/react-native-qtoast
Advanced tools
Readme
Toast component for React Native
Features:
npm install @mccsoft/react-native-qtoast
Wrap your app in ToastProvider component:
import { ToastProvider } from '@mccsoft/react-native-qtoast';
export default function App() {
return (
<ToastProvider>
<RootComponent />
</ToastProvider>
);
}
Then use 'useToast' hook inside any of your components:
import { useToast } from '@mccsoft/react-native-qtoast';
const Component = () => {
const { show } = useToast();
useEffect(() => show(
{
renderToast: () => <Text>Hello, World!</Text>,
timeout: 1000
}
), []);
}
If you want to access toast API from functions that are not components, you can use ToastAccessor
:
import { ToastAccessor } from '@mccsoft/react-native-qtoast';
const ShowToastWithTimeout = (timeout: number | undefined) => {
ToastAccessor.show({
renderToast: () => <Text>Hello, World!</Text>,
timeout: timeout
});
}
All of the methods that come from useToast() hook
show()
Adds new toast to the queue and shows it immediately. Adding new toast when there are amountOfShownToast of toasts on the screen won't show it until one of the shown toast is dismissed.
Returns the id of created toast.
show({
renderToast: (options: ToastOptions) => JSX.Element,
timeout: number | undefined,
onShow: () => Promise<void> | undefined,
onHide: () => Promise<void> | undefined,
animated: boolean | undefined,
}): string
renderToast
: a function that returns the view of your toast. Can accept ToastOptions
for use inside toast view. If undefined
, nothing will show.
timeout
: specifies how long (in ms) the toast will be on the screen. If undefined, stays forever, until hide is called.
onShow
: a callback that fires after the toast is rendered
onHide
: a callback that fires before the toast is removed from queue
animated
: value that specifies, whether or not you want to use default animations for your toasts. If true
, wraps your element from renderToast
in specific 'interactive' view, which has onShow and onHide animations alongside w/ support of swipe close-actions
hide()
Removes toast with specified id from queue
hide(
id: string | undefined
)
id
: the id of the toast from queue. If undefined, clears the queue, calling onHide for each shown toast beforehand
pause()
Pauses toast, so that it won't dismiss after its timeout is over. Remembers how much time of timeout is left (see unpause for more details).
pause(
id: string | undefined
)
id
: the id of the toast from queue. If undefined, pauses all toasts on screen.
unpause()
Unpauses toast, making it live for the rest of the timeout it has left.
unpause(
id: string | undefined
)
id
: the id of the toast from queue. If undefined, unpauses all toasts on screen.
<ToastProvider
amountOfShownToasts={2}
wrapperStyle={{ zIndex: 2 }}
containerStyle={{ gap: 2 }}
position={"top"}
inverted={false}
/>
amountOfShownToasts
: numberDetermines how many toasts can be rendered on the screen on the same time. If undefined, sets to 3.
wrapperStyle
: ViewStyleThe style of View
that wraps the container with all of the toast. Usually used for setting zIndex
.
containerStyle
: ViewStyleThe style of the container that wraps all toasts.
position
: 'bottom' | 'top'Determines the position where toasts will be shown. If bottom
, toasts will appear at the bottom at the screen. Defaults to top
.
inverted
: booleanDetermines how new toasts should be shown: below or above old ones. If true
, new toasts will appear below old. Defaults to false
An object that provides functions for use inside your toast component
type ToastOptions = {
id: string;
hide: () => Promise<void>;
}
hide()
Hides current toast (by current means the toast in which function was called)
id
Id of the current toast
MIT
FAQs
toast library for mcc
The npm package @mccsoft/react-native-qtoast receives a total of 86 weekly downloads. As such, @mccsoft/react-native-qtoast popularity was classified as not popular.
We found that @mccsoft/react-native-qtoast 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.