प्रतिक्रिया के लिए एक टोस्ट सूचना प्रणाली

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

प्रतिक्रिया के लिए एक टोस्ट सूचना प्रणाली

प्रतिक्रिया टोस्ट सूचनाएं

प्रतिक्रिया के लिए एक विन्यास योग्य, रचना योग्य, टोस्ट अधिसूचना प्रणाली।

इंस्टॉल

yarn add react-toast-notifications

उपयोग

अपने ऐप को |_+_| में लपेटें, जो |_+_| . के लिए संदर्भ प्रदान करता है वंशज।

ToastProvider

टोस्टप्रोवाइडर प्रॉप्स

संक्षिप्तता के लिए:



  • |_+_| |_+_| के बराबर है।
  • |_+_| |_+_| के बराबर है।
संपत्ति विवरण
ऑटो डिसमिस टाइमआउट Toast डिफ़ॉल्ट |_+_|. एक टोस्ट तक का समय स्वचालित रूप से मिलीसेकंड में खारिज कर दिया जाएगा।
बच्चे |_+_| आवश्यक। आपकी ऐप सामग्री।
घटक |_+_| अंतर्निहित घटकों को बदलें।
प्लेसमेंट |_+_| डिफ़ॉल्ट |_+_|. जहां, व्यूपोर्ट के संबंध में, टोस्ट लगाने के लिए।
संक्रमण अवधि |_+_| डिफ़ॉल्ट |_+_|. |_+_| . पर सीएसएस संक्रमण की अवधि अवयव।

टोस्ट प्रॉप्स

संपत्ति विवरण
दिखावट आवश्यक। |_+_|, |_+_|, |_+_|, |_+_| . में से एक
बच्चे आवश्यक। टोस्ट अधिसूचना की सामग्री।
स्वत: खारिज import { ToastProvider, useToasts } from 'react-toast-notifications' const FormWithToasts = () => { const { addToast } = useToasts() const onSubmit = async value => { const { error } = await dataPersistenceLayer(value) if (error) { addToast(error.message, { appearance: 'error' }) } else { addToast('Saved Successfully', { appearance: 'success' }) } } return ... } const App = () => ( ) डिफ़ॉल्ट: |_+_|. टाइमआउट के बाद टोस्ट को स्वचालित रूप से खारिज करना है या नहीं। से विरासत में मिला |_+_| यदि प्रदान नहीं किया गया।
ऑटो डिसमिस टाइमआउट PlacementType |_+_| से इनहेरिट किया गया।
ऑन डिसमिस: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right' गतिशील रूप से पारित किया गया।
प्लेसमेंट |_+_| |_+_| से इनहेरिट किया गया।
संक्रमण अवधि |_+_| |_+_| से इनहेरिट किया गया।
ट्रांज़िशनस्टेट: TransitionState गतिशील रूप से पारित किया गया।

अंकुड़ा

|_+_| हुक में निम्नलिखित हस्ताक्षर हैं:

'entering' | 'entered' | 'exiting' | 'exited'

|_+_| विधि में तीन तर्क हैं:

  1. पहला टोस्ट की सामग्री है, जो किसी भी रेंडर करने योग्य |_+_| हो सकता है।
  2. दूसरा है |_+_| वस्तु, जो आपको पसंद हो, कोई भी आकार ले सकती है। |_+_| |_+_| का उपयोग करते समय आवश्यक है। डिफ़ॉल्ट आकार से प्रस्थान करते समय, आपको एक वैकल्पिक, आज्ञाकारी प्रदान करना होगा |_+_| अवयव।
  3. तीसरा एक वैकल्पिक कॉलबैक है, जिसे जोड़ा गया टोस्ट |_+_| पारित किया जाता है।

|_+_| विधि में दो तर्क हैं:

  1. पहला है |_+_| टोस्ट को हटाने के लिए।
  2. दूसरा एक वैकल्पिक कॉलबैक है।

|_+_| विधि का कोई तर्क नहीं है।

|_+_| विधि में तीन तर्क हैं:

  1. पहला है |_+_| अद्यतन करने के लिए टोस्ट की।
  2. दूसरा है |_+_| ऑब्जेक्ट, जो ऐड विधि से थोड़ा अलग है क्योंकि यह एक स्वीकार करता है |_+_| संपत्ति।
  3. तीसरा एक वैकल्पिक कॉलबैक है, जिसे अद्यतन टोस्ट |_+_| पारित किया जाता है।

|_+_| वर्तमान टोस्ट का प्रतिनिधित्व करने वाली वस्तुओं की एक सरणी है, उदा।

number

बदलने योग्य अवयव

प्रत्येक टोस्ट अधिसूचना को अपने ऐप के साथ इनलाइन लाने के लिए, आप |_+_| को वैकल्पिक घटक प्रदान कर सकते हैं:

5000

एक नया बनाने के बजाय मौजूदा घटक को अनुकूलित करने के लिए, आप आयात कर सकते हैं |_+_|:

Node

विवरण डाउनलोड करें:

लेखक: जोसमैक

आधिकारिक वेबसाइट: https://github.com/jossmac/react-toast-notifications

#reactjs #जावास्क्रिप्ट

यह सभी देखें:

नई वस्तुएं

सबसे पठनीय

संपादक की पसंद