Global Helper is a Loading indicator (full screen) and toasts in 1 component accessible by a hook.
Using react context, the "Provider" needs to be wrapped around your application. It handles its own state, and accepts different components for the overlay or the Toast (If you are using bootstrap or bulma or you have your own internal css framework, you can pass a custom component and that is what is going to display.)
This package was build using Typescript
Launches the test runner in the interactive watch mode.
<GlobalHelperProvider>
Wraps around your application (similar to navigation or redux store)
Takes the following parameters:
overLayColor (String) Optional
Color of overlay background
overLayComponent (Component) Optional
If you have a specific component in mind for the center such as a spinner or loadingbar
overLayStyle (Style Object) Optional
Style for the Loading page
defaultToast (Component) Optional
If you want to add a unique toast element such as bootstrap or custom component. Must Contain a title and a body or no message will show unless you have a default in the component
toastStyle (Style Object) Optional
if you want to modify the default toast style, use this
toastTimeOut (Number) Optional
Timer for auto dimiss toasts in ms
toastLocation ("top-right" | "top-left" | "bottom-right" | "bottom-left" | "center-right" | "center-left") Optional
Locations of the toast on the screen
useGlobalHelper is a hook that can be used on components to access toasting or overlaying.
it can return the following functionality
addToast()
returns id
accepts message object which expects a title and body for the toast
removeToast()
accepts id and dismisses the toast
addOverLay()
adds overlay to the application
removeOverLay()
dismisses the overLay
removeAllToasts()
dismisses all the toasts
removeAllHelper()
dismisses all the toasts and the overLay