diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..65836a6
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["es2015-loose", "stage-0", "react"]
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..8fcb4be
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+*.log
+lib
+node_modules
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..b37f9c4
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,2 @@
+*.log
+src
diff --git a/README.md b/README.md
index 35fbead..a7d6c3e 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,57 @@
-# redux-devtools-dispatch
+# Redux DevTools Dispatch
Dispatch your actions manually to test if your app react well.
+
+### Installation
+
+`npm install --save-dev redux-devtools-dispatch`
+
+### Usage
+
+You can declare your Dispatcher the same way you declare a Monitor in your Dev Tools.
+
+```js
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import Dispatcher from 'redux-devtools-dispatch';
+
+export default createDevTools(
+
+);
+```
+
+You can also use ``, a hacky class to use multiple monitors into the ``:
+
+```js
+import React from 'react';
+
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+import Dispatcher from 'redux-devtools-dispatch';
+import MultipleMonitors from 'redux-devtools-dispatch/lib/MultipleMonitors';
+
+export default createDevTools(
+
+
+
+
+
+
+);
+```
+
+Then, just write an JSON action in the field, click on Dispatch, and that's all!
+
+### Props
+
+Name | Description
+------------- | -------------
+`initEmpty` | When `true`, the dispatcher is empty. By default, set to `false`, the dispatcher contains : `{ "type": "" }`.
+
+### Contributing
+
+As this package is my first, any comment, pull request, issue is welcome so I can learn more from everyone.
+
+### License
+
+MIT
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..cc17c44
--- /dev/null
+++ b/package.json
@@ -0,0 +1,43 @@
+{
+ "name": "redux-devtools-dispatch",
+ "version": "0.1.0",
+ "description": "Dispatch your actions manually to test if your app react well",
+ "main": "lib/index.js",
+ "scripts": {
+ "clean": "rimraf lib",
+ "build": "babel src --out-dir lib",
+ "prepublish": "npm run clean && npm run build"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/YoruNoHikage/redux-devtools-dispatch.git"
+ },
+ "keywords": [
+ "redux",
+ "devtools",
+ "dispatch",
+ "actions",
+ "manually"
+ ],
+ "author": "Alexis Launay (http://github.com/YoruNoHikage)",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/YoruNoHikage/redux-devtools-dispatch/issues"
+ },
+ "homepage": "https://github.com/YoruNoHikage/redux-devtools-dispatch",
+ "devDependencies": {
+ "babel-cli": "^6.3.15",
+ "babel-core": "^6.1.20",
+ "babel-loader": "^6.2.0",
+ "babel-preset-es2015-loose": "^6.1.3",
+ "babel-preset-react": "^6.3.13",
+ "babel-preset-stage-0": "^6.3.13",
+ "rimraf": "^2.3.4",
+ "webpack": "^1.11.0"
+ },
+ "peerDependencies": {
+ "react": "^0.14.0",
+ "redux-devtools": "^3.0.0"
+ },
+ "dependencies": {}
+}
diff --git a/src/Dispatcher.js b/src/Dispatcher.js
new file mode 100644
index 0000000..8959cd0
--- /dev/null
+++ b/src/Dispatcher.js
@@ -0,0 +1,58 @@
+import React, { Component, PropTypes } from 'react';
+
+const buttonStyles = {
+ cursor: 'pointer',
+ fontWeight: 'bold',
+ borderRadius: '3px',
+ padding: '4px',
+ margin: '5px 3px',
+ fontSize: '0.8em',
+ color: 'white',
+ textDecoration: 'none',
+ backgroundColor: '#4F5A65',
+ border: 'none',
+ position: 'absolute',
+ bottom: '3px',
+ right: '5px'
+};
+
+const contentStyles = {
+ background: '#2A2F3A',
+ margin: '5px',
+ padding: '5px',
+ borderRadius: '3px',
+ outline: 'none',
+ color: 'white',
+ overflow: 'auto'
+};
+
+export default class Dispatcher extends Component {
+ static contextTypes = {
+ store: PropTypes.object
+ };
+
+ static update = () => {};
+
+ constructor(props, context) {
+ super(props, context);
+ }
+
+ launchAction() {
+ this.context.store.dispatch(JSON.parse(this.refs.action.innerText.replace(/\s+/g, ' ')));
+ }
+
+ componentDidMount() {
+ this.refs.action.innerText = this.props.initEmpty ? '\n' : `{
+ "type": ""
+ }`;
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/src/MultipleMonitors.js b/src/MultipleMonitors.js
new file mode 100644
index 0000000..bd11a76
--- /dev/null
+++ b/src/MultipleMonitors.js
@@ -0,0 +1,41 @@
+import React, { Component, cloneElement } from 'react';
+
+function childrenMonitorState(props, state, action) {
+ return props.children.map(child => child.type.update(child.props, state, action));
+}
+
+function reducer(props, state = {}, action) {
+ return {
+ childrenMonitorState: childrenMonitorState(props, state.childMonitorState, action)
+ };
+}
+
+const defaultStyle = {
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+};
+
+export default class MultipleMonitors extends Component {
+ static update = reducer;
+
+ constructor(props, context) {
+ super(props, context);
+ }
+
+ render() {
+ const { monitorState, children, style = defaultStyle, ...rest } = this.props;
+
+ const monitors = children.map((e, i) => cloneElement(e, {
+ ...rest,
+ monitorState: monitorState.childrenMonitorState[i],
+ key: 'monitor' + i
+ }));
+
+ return (
+
+ {monitors}
+
+ );
+ }
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..59f8fd0
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1 @@
+export default from './Dispatcher';