A reuseable alert system with React.
Clone the project
git clone https://github.com/Riley1101/react-alert-with-contextGo to the project directory
cd react-alert-with-contextInstall dependencies
yarn
Start the server
yarn addCustomAlert.propTypes = {
alert: PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.shape({
title: PropTypes.string.isRequired,
message: PropTypes.string.isRequired,
link: PropTypes.string
}),
duration: PropTypes.number,
alerttype: PropTypes.oneOf(ALERT_TYPES),
})
};AlertContainer.propTypes = {
alerts: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.shape({
title: PropTypes.string.isRequired,
message: PropTypes.string.isRequired,
link: PropTypes.string
}),
duration: PropTypes.number,
alerttype: PropTypes.oneOf(ALERT_TYPES),
})
)
};To use react-alert-with-context , wrap main app body with AlertProvider
import AlertProvider from '..../alert/provider';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<AlertProvider>
<App />
</AlertProvider>
</React.StrictMode>
);import { useAlert } from '..../alert';
let { dispatch } = useAlert();<Button
variant='outlined'
onClick={() =>
dispatch({
type: "CLEAR",
})}>
Close
</Button>// to call an alert component
dispatch({
type: "ADD", // dispatch action types
alerttype: 'success', // success,info,warning,error
duration: duration, // duration on how long the alert to be shown default is 3000ms
content: {
title: title,
message: message,
link: link
}
})// to remove specific alert component
dispatch({
type: "REMOVE", // dispatch action types
alert : 'id' // id of the alert
})// to remove all alerts
dispatch({
type: "CLEAR", // dispatch action types
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent