@@ -111,16 +111,130 @@ ToastContainer extends properties from ToastContainer in react-toastify. Also ha
111111| Parameter | Type | Default | Description |
112112| ------------------------| ---------| ---------| ----------------------|
113113| renderDefaultComponent | boolean | false | Render default toast component? Use this propery if using custom toast component. |
114- | type <td colspan =3 >same as ToastContainer
115- | autoClose <td colspan =3 >same as ToastContainer
116- | hideProgressBar <td colspan =3 >same as ToastContainer
117- | position <td colspan =3 >same as ToastContainer
118- | pauseOnHover <td colspan =3 >same as ToastContainer
119- | className <td colspan =3 >same as ToastContainer
120- | bodyClassName <td colspan =3 >same as ToastContainer
121- | progressClassName <td colspan =3 >same as ToastContainer
122- | draggable <td colspan =3 >same as ToastContainer
123- | draggablePercent <td colspan =3 >same as ToastContainer
114+ | type <td colspan =3 >sa# React Toastify Redux
115+ Wraps [ react-toastify] ( https://github.com/fkhadra/react-toastify ) into a component and exposes actions and reducer.
116+
117+ ## Installation
118+ ```
119+ $ npm install --save react-toasify-redux
120+ $ yarn add react-toastify-redux
121+ ```
122+
123+ ## Usage
124+ Import the reducer and pass it to your combineReducers:
125+ ``` javascript
126+ import {combineReducers } from ' redux' ;
127+ import {toastsReducer as toasts } from ' react-toasify-redux' ;
128+
129+ export default combineReducers ({
130+ // ...other reducers
131+ toasts
132+ });
133+ ```
134+
135+ Include the toast controller in main view:
136+ ``` javascript
137+ import {ToastController } from ' react-toasify-redux' ;
138+
139+ export default () => {
140+ return (
141+ < div>
142+ ...
143+ < ToastController / >
144+ < / div>
145+ );
146+ };
147+ ```
148+
149+ ### Actions
150+ Use actions for create, update and remove toasts:
151+
152+ ``` javascript
153+ import {dismiss , update , error , message , warning , success , info } from ' react-toastify-redux' ;
154+
155+ dispatch (dismiss (id));
156+ dispatch (dismiss ()); // dismiss all toasts
157+ dispatch (update (id, options));
158+ dispatch (message (' Default message' ));
159+ dispatch (success (' Success message' ));
160+ dispatch (error (' Error message' ));
161+ dispatch (warning (' Warning message' ));
162+ dispatch (info (' Info message' ));
163+ ```
164+
165+ ### Customization toast
166+ Create toast component
167+ ``` javascript
168+ export default ({ title, message }) => (
169+ < div className= ' toast' >
170+ < div className= ' header' > {title}< / div>
171+ < div className= ' message' > {message}< / div>
172+ < / div>
173+ );
174+ ```
175+
176+ Include this component in ToastConroller
177+ ``` javascript
178+ import {ToastController } from ' react-toasify-redux' ;
179+ import CustomToastComponent from ' awesome-folder/custom-toast-component' ;
180+
181+ export default () => {
182+ return (
183+ < div>
184+ ...
185+ < ToastController toastComponent= {CustomToastComponent} / >
186+ < / div>
187+ );
188+ };
189+ ```
190+
191+ ## API
192+
193+ ### ToastContainer
194+ ToastContainer extends properties from ToastContainer in react-toastify. Also have new properties:
195+
196+ | Props | Type | Default | Description |
197+ | ----------------| -------------------------| ---------| --------------------------------------------------|
198+ | toastComponent | ComponentClass or false | - | Element that will be displayed after emit toast |
199+
200+ ### Dismiss
201+ | Parameter | Type | Required | Description |
202+ | -----------| --------| ----------| --------------------------------------------------------------------------|
203+ | toast id | string | ✘ | Id toast for dismiss. If call action without id, then dismiss all toasts |
204+
205+ ### Update
206+ | Parameter | Type | Required | Description |
207+ | -----------| --------| ----------| ----------------------|
208+ | toast id | string | ✓ | Id toast for update |
209+ | options | object | ✘ | Options listed below |
210+ * Available options :
211+ * [See: Toast Base Options](#toast-base-option)
212+ * message: toast message for update
213+
214+ ### Toast Actions (Message, Success, Info, Warning, Error)
215+ | Parameter | Type | Required | Description |
216+ | -----------| --------| ----------| ----------------------|
217+ | message | string | ✓ | Message for toast |
218+ | options | object | ✘ | Options listed below |
219+ * Available options :
220+ * [See: Toast Base Options](#toast-base-option)
221+ * id: custom id for a toast. By default in generated automatically.
222+
223+ ### <a name =" toast-base-option " >Toast Base Options</a >
224+ | Parameter | Type | Default | Description |
225+ | ------------------------| ---------| ---------| ----------------------|
226+ | renderDefaultComponent | boolean | false | Render default toast component? Use this propery if using custom toast component. |
227+ | title | string | '' | Title for custom toast component
228+ | type | One of: 'info', 'success', 'warning', 'error', 'default' | 'default' | same as ToastContainer
229+ | autoClose | number or false | 5000 | Set the delay in ms to close the toast automatically
230+ | hideProgressBar | boolean | false | Hide or show the progress bar
231+ | position | One of: 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left' | 'top-right' | Set the default position to use
232+ | pauseOnHover | boolean | true | Pause the timer when the mouse hover the toast
233+ | className | string or object | - | An optional css class to set
234+ | bodyClassName | string or object | - |same as ToastContainer
235+ | progressClassName | string or object | - |same as ToastContainer
236+ | draggable | boolean | true | Allow toast to be draggable
237+ | draggablePercent | number | 80 | The percentage of the toast's width it takes for a drag to dismiss a toast
124238
125239## License
126240Licensed under MIT
0 commit comments