diff --git a/README.md b/README.md
index 4d27588a..bf52fe91 100644
--- a/README.md
+++ b/README.md
@@ -143,20 +143,51 @@ containerStyle: PropTypes.Object // style to be applied in the alerts container
template: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired // the alert template to be used
```
+Note that the position, type and transition strings are available as constants which can be imported the next way:
+```js
+import { positions, transitions, types } from 'react-alert'
+```
+
+and have such values:
+```js
+export const positions = {
+ TOP_LEFT: 'top left',
+ TOP_CENTER: 'top center',
+ TOP_RIGHT: 'top right',
+ MIDDLE_LEFT: 'middle left',
+ MIDDLE: 'middle',
+ MIDDLE_RIGHT: 'middle right',
+ BOTTOM_LEFT: 'bottom left',
+ BOTTOM_CENTER: 'bottom center',
+ BOTTOM_RIGHT: 'bottom right'
+}
+
+export const types = {
+ INFO: 'info',
+ SUCCESS: 'success',
+ ERROR: 'error'
+}
+
+export const transitions = {
+ FADE: 'fade',
+ SCALE: 'scale'
+}
+```
+
Here's the defaults:
```js
offset: '10px'
-position: 'top center'
+position: positions.TOP_CENTER
timeout: 0
-type: 'info'
-transition: 'fade',
+type: types.INFO
+transition: transitions.FADE,
containerStyle: {
zIndex: 100
}
```
-Those options will be applied to all alerts.
+Those options will be applied to all alerts (please, also have a look at [edge-cases](#showing-alerts-in-different-positions-at-the-same-time))
## Api
@@ -259,9 +290,13 @@ You can also pass in a component as a message, like this:
alert.show(
Some Message
)
```
-## Using multiple Providers
+## Showing alerts in different positions at the same time
+
+First of all, if have a need to separate the logic of showing alerts in different
+positions at the same time it is possible to use multiple AlertProviders in one project and
+nest them across the DOM tree. Also you can use different Contexts to get the references
+to each type of alert separately.
-You can use different Contexts to show alerts in different style and position:
```js
import React, { createContext } from 'react'
@@ -305,3 +340,61 @@ const Root = () => (
render(, document.getElementById('root'))
```
+
+Another use case is when you don't want to nest a couple of AlertProviders
+because it will somehow complicate management of alerts (for example when you
+need to show alerts in more than three different positions).
+
+In this case you can pass the position directly to the alert. The alerts without
+individual position property will take it from the Provider.
+Instead, passing the position to methods `show`, `success`, `info`, `error` will
+overlap the Provider's position.
+
+Passing the property `position` will look like this:
+```js
+alert.show('Oh look, an alert!', {position: positions.BOTTOM_LEFT})
+```
+
+An example of showing alerts simultaneously in three different positions:
+```js
+import React from 'react';
+import { render } from 'react-dom'
+import { Provider as AlertProvider, useAlert, positions, transitions } from 'react-alert';
+import AlertTemplate from 'react-alert-template-basic'
+
+const alertOptions = {
+ offset: '25px',
+ timeout: 3000,
+ transition: transitions.SCALE
+};
+
+const App = () => {
+ const alert = useAlert()
+
+ const showAlert = () => {
+ alert.show('Oh look, an alert!', {position: positions.BOTTOM_LEFT}) //alert will be shown in bottom left
+ alert.show('Oh look, an alert!', {position: positions.BOTTOM_RIGHT}) //alert will be shown in bottom right
+ alert.show('Oh look, an alert!') //alert will use the Provider's position `top right`
+ }
+
+ return (
+
+ )
+}
+
+const Root = () => (
+
+
+
+
+
+)
+
+render(, document.getElementById('root'))
+```
diff --git a/__tests__/react-alert.spec.js b/__tests__/react-alert.spec.js
index d9705279..97b5b196 100644
--- a/__tests__/react-alert.spec.js
+++ b/__tests__/react-alert.spec.js
@@ -1,23 +1,16 @@
import React, { useRef, createContext } from 'react'
import 'jest-dom/extend-expect'
-import { render, fireEvent, cleanup, act } from 'react-testing-library'
+import { render, fireEvent, cleanup, act, wait } from 'react-testing-library'
import { positions, Provider, useAlert, withAlert } from '../src'
import { getStyles } from '../src/Wrapper'
+jest.useFakeTimers()
+
const styleString = style =>
Object.entries(style).reduce((styleString, [propName, propValue]) => {
return `${styleString}${propName}:${propValue};`
}, '')
-jest.useFakeTimers()
-
-jest.mock('react-transition-group', () => {
- const FakeTransition = ({ children }) => children('entered')
- const FakeTransitionGroup = ({ children }) => children
-
- return { TransitionGroup: FakeTransitionGroup, Transition: FakeTransition }
-})
-
describe('react-alert', () => {
const Template = ({ message, close, options: { type }, style }) => (