yesmeck/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="app"></div>
</body>
</html>

## index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { reduxForm, Field, reducer as formReducer } from 'redux-form';

function form(props) {
  const logParams = (params) => console.log(params);

  return (
    <form onSubmit={props.handleSubmit(logParams)} >
      MultipleSelect
      <Field name="multiple_select[]" component="select" multiple>
        <option value="One">One</option>
        <option value="Second">Second</option>
        <option value="Third">Third</option>
        <option value="Four">Four</option>
        <option value="Five">Five</option>
      </Field>
      <input type="submit" />
    </form>
  );
}

const reduxedForm = reduxForm({ form: 'form', })(form);

const mapStateToProps = (state) => ({ initialValues: { multiple_select: ["Second", "Four"] } });
const initedReduxForm = connect(mapStateToProps)(reduxedForm);

const store = createStore(combineReducers({ form: formReducer }));

ReactDOM.render( <Provider store={store}>{React.createElement(initedReduxForm)}</Provider>, document.getElementById('app'))

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.2.1",
    "react-dom": "15.2.1",
    "react-redux": "4.4.5",
    "redux": "3.5.2",
    "redux-form": "5.3.2"
  }
}

## transpiled.js
'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactRedux = require('react-redux');

var _redux = require('redux');

var _reduxForm = require('redux-form');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function form(props) {
  var logParams = function logParams(params) {
    return console.log(params);
  };

  return _react2.default.createElement(
    'form',
    { onSubmit: props.handleSubmit(logParams) },
    'MultipleSelect',
    _react2.default.createElement(
      _reduxForm.Field,
      { name: 'multiple_select[]', component: 'select', multiple: true },
      _react2.default.createElement(
        'option',
        { value: 'One' },
        'One'
      ),
      _react2.default.createElement(
        'option',
        { value: 'Second' },
        'Second'
      ),
      _react2.default.createElement(
        'option',
        { value: 'Third' },
        'Third'
      ),
      _react2.default.createElement(
        'option',
        { value: 'Four' },
        'Four'
      ),
      _react2.default.createElement(
        'option',
        { value: 'Five' },
        'Five'
      )
    ),
    _react2.default.createElement('input', { type: 'submit' })
  );
}

var reduxedForm = (0, _reduxForm.reduxForm)({ form: 'form' })(form);

var mapStateToProps = function mapStateToProps(state) {
  return { initialValues: { multiple_select: ["Second", "Four"] } };
};
var initedReduxForm = (0, _reactRedux.connect)(mapStateToProps)(reduxedForm);

var store = (0, _redux.createStore)((0, _redux.combineReducers)({ form: _reduxForm.reducer }));

_reactDom2.default.render(_react2.default.createElement(
  _reactRedux.Provider,
  { store: store },
  _react2.default.createElement(initedReduxForm)
), document.getElementById('app'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="app"></div>
	</body>
	</html>
	import React from 'react';
	import ReactDOM from 'react-dom';
	import { Provider, connect } from 'react-redux';
	import { createStore, combineReducers, applyMiddleware } from 'redux';
	import { reduxForm, Field, reducer as formReducer } from 'redux-form';

	function form(props) {
	const logParams = (params) => console.log(params);

	return (
	<form onSubmit={props.handleSubmit(logParams)} >
	MultipleSelect
	<Field name="multiple_select[]" component="select" multiple>
	<option value="One">One</option>
	<option value="Second">Second</option>
	<option value="Third">Third</option>
	<option value="Four">Four</option>
	<option value="Five">Five</option>
	</Field>
	<input type="submit" />
	</form>
	);
	}

	const reduxedForm = reduxForm({ form: 'form', })(form);

	const mapStateToProps = (state) => ({ initialValues: { multiple_select: ["Second", "Four"] } });
	const initedReduxForm = connect(mapStateToProps)(reduxedForm);

	const store = createStore(combineReducers({ form: formReducer }));

	ReactDOM.render( <Provider store={store}>{React.createElement(initedReduxForm)}</Provider>, document.getElementById('app'))
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "15.2.1",
	"react-dom": "15.2.1",
	"react-redux": "4.4.5",
	"redux": "3.5.2",
	"redux-form": "5.3.2"
	}
	}
	'use strict';

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = require('react-dom');

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _reactRedux = require('react-redux');

	var _redux = require('redux');

	var _reduxForm = require('redux-form');

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	function form(props) {
	var logParams = function logParams(params) {
	return console.log(params);
	};

	return _react2.default.createElement(
	'form',
	{ onSubmit: props.handleSubmit(logParams) },
	'MultipleSelect',
	_react2.default.createElement(
	_reduxForm.Field,
	{ name: 'multiple_select[]', component: 'select', multiple: true },
	_react2.default.createElement(
	'option',
	{ value: 'One' },
	'One'
	),
	_react2.default.createElement(
	'option',
	{ value: 'Second' },
	'Second'
	),
	_react2.default.createElement(
	'option',
	{ value: 'Third' },
	'Third'
	),
	_react2.default.createElement(
	'option',
	{ value: 'Four' },
	'Four'
	),
	_react2.default.createElement(
	'option',
	{ value: 'Five' },
	'Five'
	)
	),
	_react2.default.createElement('input', { type: 'submit' })
	);
	}

	var reduxedForm = (0, _reduxForm.reduxForm)({ form: 'form' })(form);

	var mapStateToProps = function mapStateToProps(state) {
	return { initialValues: { multiple_select: ["Second", "Four"] } };
	};
	var initedReduxForm = (0, _reactRedux.connect)(mapStateToProps)(reduxedForm);

	var store = (0, _redux.createStore)((0, _redux.combineReducers)({ form: _reduxForm.reducer }));

	_reactDom2.default.render(_react2.default.createElement(
	_reactRedux.Provider,
	{ store: store },
	_react2.default.createElement(initedReduxForm)
	), document.getElementById('app'));