{"_id":"@blackbricksoftware/redux-form-material-ui","_rev":"2-0f9ca068d6a6866949f6bd828a18066d","name":"@blackbricksoftware/redux-form-material-ui","dist-tags":{"latest":"5.0.0-beta.3"},"versions":{"5.0.0-beta.3":{"name":"@blackbricksoftware/redux-form-material-ui","version":"5.0.0-beta.3","description":"An adapter between Redux Form and Material UI components","main":"./lib/index.js","jsnext:main":"./es/index.js","repository":{"type":"git","url":"git+https://github.com/blackbricksoftware/redux-form-material-ui.git"},"scripts":{"build":"npm run build:lib && npm run build:es && npm run build:umd && npm run build:umd:min","build:es":"cross-env BABEL_ENV=es babel src --out-dir es","build:lib":"babel src --out-dir lib","build:umd":"cross-env NODE_ENV=development webpack src/index.js dist/redux-form-material-ui.js","build:umd:min":"cross-env NODE_ENV=production webpack src/index.js dist/redux-form-material-ui.min.js","clean":"rimraf dist lib","lint":"eslint src","prepublish":"npm run test && npm run lint && npm run clean && npm run build","test":"mocha --compilers js:babel-register --recursive --recursive \"src/**/__tests__/*\" --require src/__tests__/setup.js","test:watch":"npm test -- --watch","test:cov":"cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text npm test","test:codecov":"cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js"},"keywords":["redux","redux-form","material-ui","redux-form-material-ui","adapter"],"author":{"name":"Erik Rasmussen","email":"rasmussenerik@gmail.com","url":"http://github.com/erikras"},"license":"MIT","bugs":{"url":"https://github.com/blackbricksoftware/redux-form-material-ui/issues"},"homepage":"https://github.com/blackbricksoftware/redux-form-material-ui","devDependencies":{"@material-ui/core":"^3.0.1","babel-cli":"^6.24.1","babel-core":"^6.25.0","babel-eslint":"^7.2.3","babel-loader":"^7.1.1","babel-plugin-istanbul":"^4.1.4","babel-plugin-syntax-async-functions":"^6.13.0","babel-plugin-transform-es2015-modules-commonjs":"^6.24.1","babel-plugin-transform-regenerator":"^6.24.1","babel-preset-es2015-no-commonjs":"0.0.2","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","babel-register":"^6.24.1","codecov.io":"^0.1.6","cross-env":"^5.0.5","eslint":"^4.4.1","eslint-config-react-app":"^2.0.0","eslint-plugin-flowtype":"^2.35.0","eslint-plugin-import":"^2.7.0","eslint-plugin-jsx-a11y":"^5.1.1","eslint-plugin-react":"^7.1.0","expect":"^1.20.2","expect-jsx":"^3.0.0","isparta":"^4.0.0","jsdom":"^11.1.0","lodash.noop":"^3.0.1","mocha":"^3.5.0","mocha-lcov-reporter":"^1.3.0","nyc":"^11.1.0","prettier":"^1.5.3","react":"^16.3.2","react-dom":"^16.3.2","rimraf":"^2.6.1","webpack":"^3.5.2"},"peerDependencies":{"@material-ui/core":"^1.0.0 || ^3.0.0","react":"16","redux-form":"7"},"nyc":{"include":["src/**/*.js"],"sourceMap":false,"instrument":false},"npmName":"redux-form-material-ui","npmFileMap":[{"basePath":"/dist/","files":["*.js"]}],"directories":{"example":"example"},"gitHead":"ce9696ebdcce499cc8ddc50c66de10f99d020416","_id":"@blackbricksoftware/redux-form-material-ui@5.0.0-beta.3","_nodeVersion":"10.16.2","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ttOpIauwhNU3v804OGJ5MZstOrOxLMg/4zWyG7pIm8S4GqjsYLm5JvHY8Ief4kSmQDD2ViO7Q1r5/+O/3R94HA==","shasum":"f54b759f5b32e51c4abf0e7ce8ba1ac190cef60a","tarball":"https://registry.npmjs.org/@blackbricksoftware/redux-form-material-ui/-/redux-form-material-ui-5.0.0-beta.3.tgz","fileCount":51,"unpackedSize":2174456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTh0iCRA9TVsSAnZWagAANsMP/jZMM02MBw+ofdHGr0bc\nRPPoQkAsHVvgBpoQ7D9cBkiK4QFbqQAXikyRhztBKjCwUdivwGHPtcyEnx0o\na6Q63Cu6dRYNxbm0YFxa5mWoDnVVaVOCS4sBmSFhZ/+0YImKW13dGOvJdeZt\nsKlijYmq/jy4HReL8vWltz2wjXtR68PzlUUwQcxlmg7NtS97mlATHm8hXYrq\nHqyvsOfXfENU/o3Wl24VKlJ83UhR3c3lbZY3QV/5UIqQOkzpbqFD/abv3gXM\nqMpttzm74K74c4x4RpDW0oqKRKu25cuwjpdJTq5FBigzW2lHJgVxbPULquER\n7HMFsBpRL2nT6ZJPKzdqLGvn2+kU0vAjSY2jeZTQcR1mKrut5djd4GTXR4fc\nZ8UOoYRFd3i86nTSnW3qAAlU62WPn354jR6Sffvn5Eru7eDj/MiWlgvdlVm9\nCuiRNISqjLc2oIYnotPXlvKszmTrDCU7uVdgO0F8Izled0jtUspqXqgGtDa4\n4e+8hfviAaD14AyjpspZW03x5SVtrrxd0YZCdFmGy2oVng3WHVzMxSx4bDEg\no4h1TeD5LeShSBJVduGyGJi55dGc3esUhvgg/WElcr5maI+kztbN1Il4G0uO\neAJKb1CNlMvYU8rIvp5Mj/eTEV+MYj+U9FRqt1EJqnTELQODbihwdU6HdVVS\nLvMX\r\n=nZpl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEoM4kG8dd77AOpguLCD3WgekmKRcslBERmqS+3x4/BAIhANYytG/CQfthBEbUf2WWScJ8VaKATaJCvy4EmywN1pBp"}]},"maintainers":[{"name":"blackbricksoftware","email":"david@blackbrick.software"}],"_npmUser":{"name":"blackbricksoftware","email":"david@blackbrick.software"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/redux-form-material-ui_5.0.0-beta.3_1565400353977_0.9238240147232943"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-10T01:25:53.749Z","5.0.0-beta.3":"2019-08-10T01:25:54.125Z","modified":"2022-04-04T19:20:00.010Z"},"maintainers":[{"email":"david@blackbrick.software","name":"dahndy"}],"description":"An adapter between Redux Form and Material UI components","homepage":"https://github.com/blackbricksoftware/redux-form-material-ui","keywords":["redux","redux-form","material-ui","redux-form-material-ui","adapter"],"repository":{"type":"git","url":"git+https://github.com/blackbricksoftware/redux-form-material-ui.git"},"author":{"name":"Erik Rasmussen","email":"rasmussenerik@gmail.com","url":"http://github.com/erikras"},"bugs":{"url":"https://github.com/blackbricksoftware/redux-form-material-ui/issues"},"license":"MIT","readme":"---\n# redux-form-material-ui\n---\n[![NPM Version](https://img.shields.io/npm/v/redux-form-material-ui.svg?style=flat-square)](https://www.npmjs.com/package/redux-form-material-ui)\n[![NPM Downloads](https://img.shields.io/npm/dm/redux-form-material-ui.svg?style=flat-square)](https://www.npmjs.com/package/redux-form-material-ui)\n[![Build Status](https://img.shields.io/travis/erikras/redux-form-material-ui/master.svg?style=flat-square)](https://travis-ci.org/erikras/redux-form-material-ui)\n[![codecov.io](https://codecov.io/github/erikras/redux-form-material-ui/coverage.svg?branch=master)](https://codecov.io/github/erikras/redux-form-material-ui?branch=master)\n[![CDNJS version](https://img.shields.io/cdnjs/v/redux-form-material-ui.svg)](https://cdnjs.com/libraries/redux-form-material-ui)\n\n[`redux-form-material-ui`](https://github.com/erikras/redux-form-material-ui) is a set of\nwrappers to facilitate the use of\n[`material-uibeta`](https://github.com/callemall/material-ui) components with\n[`redux-form`](https://github.com/erikras/redux-form).\n\nLatest version is supported by only for material-ui beta.\n\n---\n\n## [Live Demo](http://erikras.github.io/redux-form-material-ui/) :eyes:\n\n## Installation\n\nUsing [npm](https://www.npmjs.org/):\n\n```bash\n  $ npm install --save redux-form-material-ui@next\n```\n\nUsing [yarn](https://yarnpkg.com):\n\n```bash\n  $ yarn add redux-form-material-ui@next\n```\n\n## Available Components\n\n* [AutoComplete](http://www.material-ui.com/#/components/auto-complete)\n* [Checkbox](http://www.material-ui.com/#/components/checkbox)\n* ~[TimePicker](http://www.material-ui.com/#/components/time-picker)~ [Material-4787](https://github.com/callemall/material-ui/issues/4787)\n* ~[DatePicker](http://www.material-ui.com/#/components/date-picker)~ [Material-4787](https://github.com/callemall/material-ui/issues/4787)\n* [RadioButtonGroup](http://www.material-ui.com/#/components/radio-button)\n* [Select](http://www.material-ui.com/#/components/Select)\n* ~[Slider](http://www.material-ui.com/#/components/slider)~ [Material-4793](https://github.com/callemall/material-ui/issues/4793)\n* [TextField](http://www.material-ui.com/#/components/text-field)\n* [Switch](https://material.io/guidelines/components/lists-controls.html#lists-controls-types-of-list-controls)\n\n## Usage\n\nRather than import your component class from `material-ui`, import it from `redux-form-material-ui`\nand then pass the component class directly to the `component` prop of `Field`.\n\n```js\nimport { reduxForm, Field } from 'redux-form'\nimport MenuItem from '@material-ui/core/MenuItem'\nimport Radio from '@material-ui/core/RadioButton'\nimport {\n  Checkbox,\n  RadioGroup,\n  Select,\n  TextField,\n  Switch,\n  FormControlLabel,\n} from 'redux-form-material-ui'\n\nclass MyForm extends Component {\n  render() {\n    return (\n      <form>\n        <Field name=\"username\" component={TextField} placeholder=\"Street\"/>\n\n        <Field name=\"plan\" component={Select} placeholder=\"Select a plan\">\n          <MenuItem value=\"monthly\">Monthly</MenuItem>\n          <MenuItem value=\"yearly\">Yearly</MenuItem>\n          <MenuItem value=\"lifetime\">Lifetime</MenuItem>\n        </Field>\n\n        <FormControlLabel control={<Field name=\"agreeToTerms\" component={Checkbox} /> } label=\"Agree to terms?\" />\n\n      <FormControlLabel control={<Field name=\"receiveEmails\" component={Switch} /> } label=\"Please spam me!\" />\n\n        <Field name=\"bestFramework\" component={RadioGroup}>\n          <Radio value=\"react\" label=\"React\"/>\n          <Radio value=\"angular\" label=\"Angular\"/>\n          <Radio value=\"ember\" label=\"Ember\"/>\n        </Field>\n      </form>\n    )\n  }\n}\n\n// Decorate with redux-form\nMyForm = reduxForm({\n  form: 'myForm'\n})(MyForm)\n\nexport default MyForm\n```\n\n## No Default Values\n\nBecause of the strict \"controlled component\" nature of `redux-form`,\nsome of the Material UI functionality related to defaulting of values has been disabled\ne.g. `defaultValue`, `defaultDate`, `defaultTime`, `defaultToggled`, `defaultChecked`, etc.\nIf you need a field to be initialized to a certain state, you should use the `initialValues`\nAPI of `redux-form`.\n\n## Instance API\n\n#### `getRenderedComponent()`\n\nReturns a reference to the Material UI component that has been rendered. This is useful for\ncalling instance methods on the Material UI components. For example, if you wanted to focus on\nthe `username` element when your form mounts, you could do:\n\n```js\ncomponentWillMount() {\n  this.refs.firstField      // the Field\n    .getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField\n    .getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField\n    .focus()                // on TextField\n}\n```\n\nas long as you specified a `ref` and `withRef` on your `Field` component.\n\n```js\nrender() {\n  return (\n    <form>\n      ...\n      <Field name=\"username\" component={TextField} withRef ref=\"firstField\"/>\n      ...\n    </form>\n  )\n}\n```\n","readmeFilename":"README.md"}