@xtreamsrl/react-feedback-management
v0.3.3
Published
This package exposes a provider GlobalFeedbackProvider and the following hooks: - useGlobalError - useGlobalSuccess - useErrorManagement - useSuccessManagement
Downloads
9
Readme
@xtreamsrl/react-feedback-management
This package exposes a provider GlobalFeedbackProvider and the following hooks:
- useGlobalError
- useGlobalSuccess
- useErrorManagement
- useSuccessManagement
The library is a wrapper that keeps track of Success and Error. Moreover, it provides functions to update their values.
Installation
npm install @xtreamsrl/react-feedback-management
Usage
Before actually using these library tools it is necessary to define the structure of Error
and Success
relying on augmentation in file feedback.d.ts
(the name is not relevant) with the following structure:
import { Error, Success } from '@xtreamsrl/react-feedback-management';
declare module '@xtreamsrl/react-feedback-management' {
interface Error {
/*
* Here you can define your error type.
* e.g. */
code: number;
message: string
}
interface Success {
/*
* Here you can define your success type.
* e.g. */
message: string
}
}
GlobalFeedbackProvider
After having defined the Error
and Success
interfaces using augmentation, it is necessary to wrap the main app with the GlobalFeedbackProvider
import { GlobalFeedbackProvider } from '@xtreamsrl/react-feedback-management';
function App() {
return <GlobalFeedbackProvider>
<MainApp/>
</GlobalFeedbackProvider>
}
With these two steps done, one can use the available hooks as needed.
useErrorManagement
A possible way of using this hook is to show and hide error toasts. Here is an example:
import {useErrorManagement} from "@xtreamsrl/react-feedback-management";
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert'
const ErrorToast: React.FC = () => {
const { error, setError } = useErrorManagement();
const handleClose = () => setError(null);
return error ? (
<Snackbar
data-test="success-toast"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
open={error !== null}
autoHideDuration={3000}
onClose={handleClose}>
<Alert sx={{ width: '100%' }} onClose={handleClose} severity="error" variant="filled">
{error?.message}
</Alert>
</Snackbar>
) : <button onClick={() => setError({message: 'not ok', code: 1})}>Show</button>;
};
Here the error is set in the component itself using the button, but generally it is set from outside the component, more specifically, in the catch clause of asynchronous operations.
useGlobalError
This hook is useful to globally set an error if an operation fails. An example may be using the return values of a query execution (e.g., error
or isError
) and pass them to the useGlobalError
.
useGlobalError({isError, error: {message: error.message, code: error.code}})
useSuccessManagement
A possible way of using this hook is to show and hide success toasts. Here is an example:
import {useSuccessManagement} from "@xtreamsrl/react-feedback-management";
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert'
const SuccessToast: React.FC = () => {
const { success, setSuccess } = useSuccessManagement();
const handleClose = () => setSuccess(null);
return success ? (
<Snackbar
data-test="success-toast"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
open={success !== null}
autoHideDuration={3000}
onClose={handleClose}>
<Alert sx={{ width: '100%' }} onClose={handleClose} severity="success" variant="filled">
{success?.message}
</Alert>
</Snackbar>
) : <button onClick={() => setSuccess({message: 'ok'})}>Show</button>;
};
useGlobalSuccess
This hook is useful to globally set a success if an operation succeed. An example may be using the return values of a query execution (e.g., isSuccess
) and pass them to the useGlobalSuccess
.
useGlobalSuccess({isSuccess, success: {message: 'Operation completed'}})