Completely updated React, fixed #11, (hopefully)

This commit is contained in:
2018-03-04 19:11:49 -05:00
parent 6e0afd6e2a
commit 34e5f5139a
13674 changed files with 333464 additions and 473223 deletions

View File

@@ -1,6 +1,6 @@
# React Toastify [![Build Status](https://travis-ci.org/fkhadra/react-toastify.svg?branch=master)](https://travis-ci.org/fkhadra/react-toastify) [![npm](https://img.shields.io/npm/dm/react-toastify.svg)]() [![npm](https://img.shields.io/npm/v/react-toastify.svg)]() [![license](https://img.shields.io/github/license/fkhadra/react-toastify.svg?maxAge=2592000)]() [![Coverage Status](https://coveralls.io/repos/github/fkhadra/react-toastify/badge.svg?branch=master)](https://coveralls.io/github/fkhadra/react-toastify?branch=master)
![React toastify](https://user-images.githubusercontent.com/5574267/28753331-1380a2f0-7534-11e7-8456-0b32e959db07.gif "React toastify")
![React toastify](https://user-images.githubusercontent.com/5574267/35336500-e58f35b6-0118-11e8-800b-2da6594fc700.gif "React toastify")
🎉 React-Toastify allow you to add notification to your app with ease. No bullshit !
@@ -161,7 +161,7 @@ For convenience, toast expose a POSITION property to avoid any typo.
```js
import React from 'react';
import { ToastContainer } from 'react-toastify';
import { ToastContainer, toast } from 'react-toastify';
class App extends Component {
closeAfter15 = () => toast("YOLO", { autoClose: 15000 });
@@ -742,7 +742,7 @@ style({
#### Style with className
All className like props can be a css class or a glamor rule.
All className like props can be a css class or a glamor rule, or a css-in-js object.
⚠️ Use a glamor rule rather than a css class when you want to override a property cause glamor stylesheet
will be injected last ⚠️
@@ -755,13 +755,16 @@ will be injected last ⚠️
class Style extends Component {
notify = () => {
toast("Dark style notification with default type progress bar",{
className: css({
// css-in-js
className: {
background: "black"
}),
},
// css class
bodyClassName: "grow-font-size"
});
toast("Fancy progress bar.",{
// glamor rule
progressClassName: css({
background: "repeating-radial-gradient(circle at center, red 0, blue, green 30px)"
})
@@ -782,6 +785,9 @@ You could define your style globally:
return(
{/*Component*/}
<ToastContainer
className={{
color: "black"
}}
toastClassName="dark-toast"
progressClassName={css({
height: "2px"
@@ -884,6 +890,23 @@ toast.update(toastId, {
IE 11+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
## Release Notes
### V3.3.4
- `toast.update` run now at the end of the call stack. For more details, check [issue #135](https://github.com/fkhadra/react-toastify/issues/135)
### V3.3.3
- Clean animation on entered. This was preventing any update transition to works.
### V3.3.1
- Fix height [issue #124](https://github.com/fkhadra/react-toastify/issues/124)
- Update typescript definition
### V3.3.0
- Better accessibility, relate to [issue #121](https://github.com/fkhadra/react-toastify/issues/121)
- Reviewed exit animation. No more clipping.
### V3.2.2