{"_id":"@alex925/react-redux-modal","_rev":"1-a8a75d880aa534e8ad4ae256765c08ef","name":"@alex925/react-redux-modal","description":"react-redux-modal is a React modal implemented with Redux","dist-tags":{"latest":"0.5.3"},"versions":{"0.5.3":{"name":"@alex925/react-redux-modal","version":"0.5.3","description":"react-redux-modal is a React modal implemented with Redux","main":"lib/index.js","jsnext:main":"./src/index.js","scripts":{"start":"better-npm-run dev-server","build:w":"better-npm-run build:w","build":"better-npm-run build && npm run less && npm run less:m","less":"lessc src/less/index.less --autoprefix=\"last 2 versions\" lib/css/react-redux-modal.css","less:m":"lessc src/less/index.less --autoprefix=\"last 2 versions\" --clean-css lib/css/react-redux-modal.min.css","clean":"better-npm-run clean","lint":"better-npm-run lint","build_app":"concurrent --kill-others & npm run clean & npm run lint & npm run build & npm run less & npm run less:m","buildc":"better-npm-run build_client"},"eslintConfig":{"root":true},"betterScripts":{"dev-server":{"command":"./node_modules/.bin/webpack-dev-server --hot --inline --config build/webpack.config.js","env":{"NODE_ENV":"development","NODE_PORT":3001}},"build_client":{"command":"./node_modules/.bin/webpack --progress --config build/webpack.config.js","env":{"NODE_ENV":"production"}},"build":{"command":"node_modules/.bin/babel src/ --out-dir lib"},"build:w":{"command":"node_modules/.bin/babel -w src/ --out-dir lib"},"lint":{"command":"node_modules/.bin/eslint . --ext .js --ext .jsx || true"},"clean":{"command":"node_modules/.bin/rimraf dist lib"}},"author":{"name":"Diego Oliveira"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/diegoddox/react-redux-modal.git"},"bugs":{"url":"https://github.com/diegoddox/react-redux-modal/issues"},"files":["lib/","src/","CHANGELOG.md","README.md"],"keywords":["React.js","React","Redux","react","redux modal","react-redux-modal","react-component","modal","react modal","react redux modal","react modal redux"],"devDependencies":{"babel-cli":"^6.6.5","babel-core":"^6.2.1","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","babel-plugin-syntax-class-properties":"^6.1.18","babel-plugin-transform-class-properties":"^6.2.2","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-es2015-arrow-functions":"^6.1.18","babel-plugin-transform-es2015-block-scoping":"^6.1.18","babel-plugin-transform-proto-to-assign":"^6.6.5","babel-preset-es2015":"^6.1.18","babel-preset-react":"^6.1.18","babel-preset-stage-0":"^6.1.18","better-npm-run":"0.0.4","chance":"^0.8.0","concurrently":"^1.0.0","core-js":"^2.0.2","css-loader":"^0.23.1","eslint":"^1.10.1","eslint-loader":"^1.1.1","eslint-plugin-react":"^3.16.1","html-webpack-plugin":"^1.6.2","jasmine":"^2.3.2","jshint":"^2.9.1-rc1","jshint-loader":"^0.8.3","karma":"^0.13.15","karma-jasmine":"^0.3.6","karma-phantomjs-launcher":"^0.2.1","karma-webpack":"^1.7.0","less":"^2.5.3","less-loader":"^2.2.1","less-plugin-autoprefix":"^1.5.1","less-plugin-clean-css":"^1.5.1","lorem-ipsum":"^1.0.3","phantomjs":"^1.9.19","phantomjs-polyfill":"0.0.1","react":"^0.14.7","react-dom":"^0.14.7","react-hot-loader":"^1.3.0","react-redux":"^4.4.0","redux":"^3.3.1","redux-devtools":"^3.1.1","redux-devtools-dock-monitor":"^1.1.0","redux-devtools-log-monitor":"^1.0.5","redux-logger":"^2.0.4","rimraf":"^2.4.4","style-loader":"^0.13.0","url-loader":"^0.5.7","webpack":"^1.12.4","webpack-dev-server":"^1.14.0"},"dependencies":{"classnames":"^2.2.3","eventemitter3":"^1.1.1","uuid":"^2.0.1"},"gitHead":"1b9173ea3b156cc4e0018aad48c7f859ae432bac","homepage":"https://github.com/diegoddox/react-redux-modal#readme","_id":"@alex925/react-redux-modal@0.5.3","_npmVersion":"5.4.2","_nodeVersion":"8.3.0","_npmUser":{"name":"alex925","email":"alex@rgnl.net"},"dist":{"integrity":"sha512-digZMDszbT+Sp1i0IevTQ716NHRsTfB0oK8ZDmWOTpMAttVlwTNeReHCHTsw5sS+kI32kPX2YQpZoSAszxTHzA==","shasum":"676b25475fa2f3fc362224314cb67d18fdcda825","tarball":"https://registry.npmjs.org/@alex925/react-redux-modal/-/react-redux-modal-0.5.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEkt4U1sbx8NUWajhdyfBpn/Y3pkq2uvmIBEgksIpDKwIgdqoWzRfp5waZcAsLGuqDmGR66M1eJbUWQRByDKWbAZk="}]},"maintainers":[{"name":"alex925","email":"alex@rgnl.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-redux-modal-0.5.3.tgz_1506681714605_0.9591595933306962"}}},"readme":"# NOT MAINTAINED\n\n##`react-redux-modal` [demo](http://diegoddox.github.io/react-redux-modal/)\n\n## Implementation Guide\n\n##### 1. Installation\n\n`npm install --save react-redux-modal`\n\n##### 2. Add the `react-redux-modal` css link to your app\n```\n<link href=\"http://diegoddox.github.io/react-redux-modal/0.5/react-redux-modal.min.css\" rel=\"stylesheet\" type=\"text/css\">\n```\n##### 3. The third thing you need to do is to add the `react-redux-modal` `reducer` to Redux.\n\n```\nimport {createStore, combineReducers} from 'redux'\nimport {reducer as modalReducer} from 'react-redux-modal'\nconst reducers = {\n  // ... other reducers ...\n  modals: modalReducer // <- Mounted at modals.\n}\nconst reducer = combineReducers(reducers)\nconst store = createStore(reducer)\n```\n\n##### NOTE: The default mount point for `react-redux-modal` is `modals`.\n\n##### 4. Add the `react-redux-modal` React component to the root of your app\n```\nimport {Provider}  from 'react-redux'\nimport ReduxModal from 'react-redux-modal'\n\n<Provider store={store}>\n  <div>\n    ... other things like router ...\n    <ReduxModal />\n  </div>\n</Provider>\n```\n\n##### 5. Add the `react-redux-modal`  `modal` emitter\nThe `modal` method use [eventemitter3](https://github.com/primus/eventemitter3) to dispatch the actions\n\n```\nimport React, {Component}  from 'react'\nimport {modal} from 'react-redux-modal' // The modal emitter\n```\n\nCreate a `component` that will be injected in the modal\n```\nclass myModalComopnent extends Component {\n  constructor(props) {\n    super(props);\n    console.log('## MODAL DATA AND PROPS:', this.props);\n  }\n\n  removeThisModal() {\n    this.props.removeModal();\n  }\n\t\n  render() {\n    return (\n      <div>\n        <p>this is my modal</p>\n        <button\n          type=\"button\"\n          onClick={this.removeThisModal.bind(this)}>\n          close this modal\n        </button>\n      </div>\n    );\n  }\n}\n```\n```\nexport class YourComponent extends Component {\n  constructor(props) {\n\t  super(props);\n  }\n\n  addModal() {\n    modal.add(myModalComopnent, {\n      title: 'This is my modal',\n      size: 'medium', // large, medium or small,\n      closeOnOutsideClick: false // (optional) Switch to true if you want to close the modal by clicking outside of it,\n      hideTitleBar: false // (optional) Switch to true if do not want the default title bar and close button,\n      hideCloseButton: false // (optional) if you don't wanna show the top right close button\n      //.. all what you put in here you will get access in the modal props ;)\n    });\n  }\n  \n  render() {\n    return <button onClick={this.addModal.bind(this)}>Add modal</button>;\n  }\n}\n```\n\nThe `modal` `add` method takes two arguments, first a `react` `component`  and a `object` that will specify the modal `title`, `size` and `data` \n\n# Run a local demo\n```\ngit clone https://github.com/diegoddox/react-redux-modal.git\ncd react-redux-modal\nnpm install\nnpm start\n```\nopen your browser at `http://localhost:3001`\n\n# TODO\ncreate test.","maintainers":[{"name":"alex925","email":"alex@rgnl.net"}],"time":{"modified":"2022-04-04T12:38:35.913Z","created":"2017-09-29T10:41:55.523Z","0.5.3":"2017-09-29T10:41:55.523Z"},"homepage":"https://github.com/diegoddox/react-redux-modal#readme","keywords":["React.js","React","Redux","react","redux modal","react-redux-modal","react-component","modal","react modal","react redux modal","react modal redux"],"repository":{"type":"git","url":"git+https://github.com/diegoddox/react-redux-modal.git"},"author":{"name":"Diego Oliveira"},"bugs":{"url":"https://github.com/diegoddox/react-redux-modal/issues"},"license":"MIT","readmeFilename":"README.md"}