Skip to content

Commit 35aba45

Browse files
committed
Added tests
Added prop title to toast options Updated definitions
1 parent 98c8d13 commit 35aba45

File tree

14 files changed

+4167
-248
lines changed

14 files changed

+4167
-248
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
dist
33
lib
44
node_modules
5-
npm-debug.log
5+
npm-debug.log
6+
coverage/

.travis.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
language: node_js
2+
node_js:
3+
- "8"
4+
script:
5+
- npm run test:coverage

README.md

Lines changed: 124 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -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
126240
Licensed under MIT

externals.d.ts

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)