How to realize the Global component Toast Light prompt effect by using React
Today, I would like to share with you how to use React to achieve the global component Toast light prompt effect of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.
Demand analysis
Toast does not need to be rendered with the page, but is called at any time as needed.
Toast is a lightweight prompt component whose prompts do not interrupt the user's actions and are automatically closed after a period of time.
Toast needs to provide several different message types to suit different usage scenarios.
Toast's approach must be concise enough to avoid unnecessary code redundancy.
How to use
First introduce
Import Toast from'. / components/toast'
Event calls in JSX:
{Toast.info ('normal hint')}} > normal hint
Method calls in JS:
Toast.info ('general hint')
Callback method:
Const hideLoading = Toast.loading ('loading...', 0, () = > {Toast.success ('loading complete') setTimeout (hideLoading, 2000)
Call rules:
3 parameters:
Content prompt content string (loading method is optional)
Duration prompt duration number, unit ms (optional)
Callback function when onClose prompt is turned off (optional)
Toast.info ("normal", 2000) Toast.success ("success", 1000, () = > {console.log ('callback method')}) Toast.error ("error") Toast.loading ()
Code implementation
Directory structure:
Index.js: external export API, sets default parameter values, and globally creates or destroys the DIV of Toast.
The specific content displayed by toast.js:Toast and the state management when Toast is called multiple times.
The style of toast.css:Toast, do not need to say much.
Index.js:
Import React from 'react'import ReactDOM from' react-dom'import Toast from'. / toast'import'. / toast.css'function createNotification () {const div = document.createElement ('div') document.body.appendChild (div) const notification = ReactDOM.render (, div) return {addNotice (notice) {return notification.addNotice (notice)} Destroy () {ReactDOM.unmountComponentAtNode (div) document.body.removeChild (div)}} let notificationconst notice = (type, content, duration = 2000, onClose) = > {if (! notification) notification = createNotification () return notification.addNotice ({type, content, duration, onClose})} export default {info (content, duration, onClose) {return notice ('info', content, duration, onClose)}, success (content =' successful operation', duration OnClose) {return notice ('success', content, duration, onClose)}, error (content, duration, onClose) {return notice (' error', content, duration, onClose)}, loading (content = 'loading...', duration = 0, onClose) {return notice ('loading', content, duration, onClose)}}
Toast.js:
Import React {Component} from 'react'class ToastBox extends Component {constructor () {super () this.transitionTime = 300this.state = {notices: []} this.removeNotice = this.removeNotice.bind (this)} getNoticeKey () {const {notices} = this.state return `notice-$ {new Date (). GetTime ()}-${notices.length} `} addNotice (notice) {const {notices} = this.state notice .key = this.getNoticeKey () / / notices.push (notice) / / display all prompts notices [0] = notice / / only show the last prompt this.setState ({notices}) if (notice.duration > 0) {setTimeout (()) = > {this.removeNotice (notice.key)} Notice.duration)} return () = > {this.removeNotice (notice.key)}} removeNotice (key) {const {notices} = this.state this.setState ({notices: notices.filter ((notice) = > {if (notice.key = key) {if (notice.onClose) setTimeout (notice.onClose) This.transitionTime) return false} return true})} render () {const {notices} = this.state const icons = {info: 'toast_info', success:' toast_success', error: 'toast_error' Loading: 'toast_loading'} return ({notices.map (notice = > ({notice.content}))})} export default ToastBox
Toast.css:
.toast {position: fixed; left: 0; top: 0; z-index: 999; display: flex; flex-direction: column;} .toast _ bg {position: 100%; height: 100%; left: 0; top: 0;} .toast _ box {position: relative; left: 50%; top: 50%; width: 2.8remt; height: 2rem; margin:-1rem-1.4rem; background: rgba (0,0,0,0.65) Border-radius: .1rem; color: # fff;} .toast _ text {position: absolute; bottom: 16%; text-align: center; width: 90%; margin: 0.5%; height: .28rem; overflow: hidden; text-overflow: nowrap;} .toast _ icon {position: relative; left: 50%; top: 15%; margin:-.4rem; width: .8rem; height: .8rem } .toast _ loading {- webkit-animation: loading 1s steps (12, end) infinite; animation: loading 1s steps (12, end) infinite; background: url (_ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAM1BMVEUAAAD///+3leKCAAAAEHRSTlMAENCA8KAgsGDgQMCQUDBwhylaLQAAAL1JREFUOMu9U0kSwyAMK9jsS/T/1zZt2pgEZzq9RBeMZYRGDI/70bO5JptjrOAQVTonIJVK5bW2ma9A7VvpK8OdeQfbZectrDnyU+Oo0b68wGK0muDPdxpOciaizq5pkAgiIPAoew2rBVNYZoM2YHbZDNKz/2Ogam3ff5gMEL8wisfh3KKZiFiGWFkk1B7NSbhNQFy4M2+PghbODNsg7y8THM2njiy8gBgcaEUA9GgNJbxh7fJv+NxiFvYmPAFtCQZNK1qZIAAAAABJRU5ErkJggg==") no-repeat Background-size: 100%;} .toast _ success {background: url (_ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAM1BMVEUAAAD///+3leKCAAAAEHRSTlMA8DAQ0GBP4LCggMBwIJBAIttdjAAAAINJREFUOMvdkUsOwyAMBbH5hUCauf9pK1SlohF438x2LPn52f09+8vUfiNb/gighj8FouEjYCUoQDXiBSD7pdcMiK7XC9wCFmlDO3T20Scgx287ne13pwDU89NOJ3g3maCmJDANqIGRtLj8oi1ed1GMdmcB7wXIYX8QdQZJiM5Em3smbyVICDCOrCqSAAAAAElFTkSuQmCC") no-repeat; background-size: 100% } .toast _ error {background: url (_ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAD///87TQQwAAAAD3RSTlMA0BDAMODwUKBgsCCAQJClzVPvAAAA0UlEQVQoz2MgErAclv9o44Dgc8b/B4KvBTA+t/3XdgeWivjPG6ACbl8ngNXlp0AN+L8IwtD6DzFm2w+Y3v5sMGW/ACbA9Rms9ZsCTIApH2QR608GhoUKQJ4xA8P8AKCAP5CwF2JgUPwIlPwCFDj/AMRRYJIHCnL8AZkJ1AfkAcUYGNhBpso7MICUgBQw8H4EEv/B5ssDFYA4mAKYWjANfd+Aai3CYZ9BDoM63RDkdEGQ0zE9h+l9zADCDEIGt2/wQEZEwwVepGhgYEdEFGZUEgYAW05XI3jSsVwAAAAASUVORK5CYII=") no-repeat; background-size: 100%;} .toast _ info {background: url (_ "data:image/png) Base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAALVBMVEUAAAD///+hSKubAAAADnRSTlMA4CCAwKBAMJBg8NAQUNhWlbcAAAC+SURBVCjPYyASsLfse+1cgOBzyr0DgocXYHwmv4dtCkwZck8UoAJZDydA1C2H8NnexUAYR99BjNF6CtMbtwhM+QUACUUhIMH6BKz14QEgafcYSPDIgSxifMkAE2CYJwAk6gQQAozPgURfA0KAA0T6JSAE2ECm7lNACDC9BhLvGGACIA6GAFyLohBEC9xQqLeeQKwFA4i1EIfBAeNzuNMVhSBOx/AcpvcxAwgzCDEDGTMaGHhhEYWIShN4VBIGAPvRT5YzufhUAAAAAElFTkSuQmCC ") no-repeat; background-size: 100%;} @-webkit-keyframes loading {0% {- webkit-transform: rotate3d (0,0,1, 0deg); transform: rotate3d (0,0,1, 0deg) } 100% {- webkit-transform: rotate3d (0,0,1, 360deg); transform: rotate3d (0,0,1, 360deg);} @ keyframes loading {0% {- webkit-transform: rotate3d (0,0,1, 0deg); transform: rotate3d (0,0,1, 0deg);} 100% {- webkit-transform: rotate3d (0,0,1, 360deg); transform: rotate3d (0,0,1, 360deg) }} these are all the contents of the article "how to use React to achieve the Toast light prompt effect of the global component". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
