Skip to content

Commit 9ff039b

Browse files
faysterfayster
authored
Merge pull request #1 from fayster/develop
Develop
2 parents 98c8d13 + 3aff02a commit 9ff039b

14 files changed

+4118
-207
lines changed

‎.gitignore

+2-1
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

+5
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

+128-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
# React Toastify Redux
1+
# React Toastify Redux [![Build Status](https://travis-ci.org/fayster/react-toastify-redux.svg?branch=develop)](https://travis-ci.org/fayster/react-toastify-redux) [![npm version](https://badge.fury.io/js/react-toastify-redux.svg)](https://badge.fury.io/js/react-toastify-redux) [![npm](https://img.shields.io/npm/dm/react-toastify-redux.svg)](https://github.com/fayster/react-toastify-redux) [![Coverage Status](https://coveralls.io/repos/github/fayster/react-toastify-redux/badge.svg?branch=develop)](https://coveralls.io/github/fayster/react-toastify-redux?branch=master)
2+
3+
4+
25
Wraps [react-toastify](https://github.com/fkhadra/react-toastify) into a component and exposes actions and reducer.
36

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

125242
## License
126243
Licensed under MIT

‎externals.d.ts

-6
This file was deleted.

0 commit comments

Comments
 (0)